VueJs компонент имена

Question

я работаю в VueJS и у меня есть следующий код

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

так, что я пытаюсь выполнить это, чтобы отобразить имя, как {{selectedComponent}}

но excpected он отображает «appManagment» потому что это компонент, который был выбран. Итак, вопрос в том, как отобразить другое имя, например, я хочу, чтобы вместо «appManagment» появился «Managment». Я использую его для меню навигации, отображающего, где находится пользователь, поэтому любая помощь будет оценена.

Answer 1

Я хотел бы создать объект, как один ниже

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

, а затем просто использовать его всякий раз, когда вы хотите, чтобы отобразить текст, который соответствует выбранному компоненту. Например

prettyNames[selectedComponent] 

Answer 2

Вы можете зарегистрировать собственный фильтр с помощью метода глобального Vue.filter(), передавая в FilterId и функции фильтра. Функция фильтрации принимает значение в качестве аргумента и возвращает преобразованное значение:

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

    return newName; 
}) 

Затем с помощью фильтра по тексту:

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