CODEWITHSUNDEEP
htmlvue.js
user7461761
user7461761

Reputation:

VueJs component names

I'm working in VueJS and i have the following code

<li @click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li>

so what i try to accomplish is to display the name like {{selectedComponent}}

but as excpected it displays "appManagment" because this is the component that was selected. So the question is, how to display a different name, for example i want just "Managment" to appear instead of "appManagment". I'm using it for the navigation menu that displays where the user is located, so any help would be appreciated.

Upvotes: 1

Views: 621

Answers (2)

Vasil Gerginski
Vasil Gerginski

Reputation: 587

You can register a custom filter with the global Vue.filter() method, passing in a filterID and a filter function. The filter function takes a value as the argument and returns the transformed value:

Vue.filter('custom', function (value) { 
   // add your code to determine 
   // name based on value here

   return newName;
 })

Then use your filter on the text:

<i class="ion-clipboard"></i>{{ selectedComponent | custom }}

Upvotes: 0

mic4ael
mic4ael

Reputation: 8310

I would create an object like the one below

var prettyNames = {
    'appManagment': 'Some very nice name'
}

and then just use it whenever you want to display text which corresponds to the currently selected component. For example

prettyNames[selectedComponent]

Upvotes: 1

Related Questions