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, но не для этого значения.

вычисленное свойство воздействует на другое свойство экземпляра и возвращаемое значение.

но здесь вы ничего не указали и использовали это, так что он не сможет использовать любое свойство.

если вам нужна дополнительная информация, пожалуйста, прокомментируйте.

Другие вопросы по тегам