Vuejs2 - вычисляемое свойство в компонентах
У меня есть компонент для отображения имен. Мне нужно рассчитать количество букв для каждого имени. я добавил nameLength
как вычисляемое свойство, но vuejs не определяет это свойство в цикле.
var listing = Vue.extend({
template: '#users-template',
data: function () {
return {
query: '',
list: [],
user: '',
}
},
computed: {
computedList: function () {
var vm = this;
return this.list.filter(function (item) {
return item.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
},
nameLength: function () {
return this.length; //calculate length of current item
}
},
created: function () {
this.loadItems();
},
methods: {
loadItems: function () {
this.list = ['mike','arnold','tony']
},
}
});
http://jsfiddle.net/apokjqxx/22/
Так что ожидаемый результат
микрофон-4
Arnold-6
Tony-4
1 ответ
Кажется, есть некоторое недопонимание в отношении вычисляемой собственности. Я создал форк из вашей скрипки, он будет работать так, как вам нужно.
http://jsfiddle.net/6vhjq11v/5/
nameLength: function () {
return this.length; //calculate length of current item
}
в комментарии это показывает, что "рассчитать длину текущего элемента", но JS не может получить понятие о текущем элементе
this.length
это выполнит длину для компонента Vue, но не для этого значения.
вычисленное свойство воздействует на другое свойство экземпляра и возвращаемое значение.
но здесь вы ничего не указали и использовали это, так что он не сможет использовать любое свойство.
если вам нужна дополнительная информация, пожалуйста, прокомментируйте.