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

Арнольд-6

Тони-4


computed-properties vuejs2
person maxxdev    schedule 03.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

http://jsfiddle.net/6vhjq11v/5/

nameLength: function () {
    return this.length; //calculate length of current item
}

в комментарии он показывает, что «рассчитать длину текущего элемента», но js не может получить концепцию текущего элемента

this.length

это выполнит длину для компонента Vue, а не для этого значения.

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

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

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

person Hardik Satasiya    schedule 04.11.2016
comment
Спасибо, Hardik, но ваш пример jsfiddle не работает. - person maxxdev; 04.11.2016
comment
jsfiddle.net/6vhjq11v/5 попробуйте это извините за то, что забыл обновить это - person Hardik Satasiya; 04.11.2016
comment
Спасибо, если переместите вычисление длины к методу, который работает нормально, как ожидалось. Просто интересно, существует ли способ использования computed. Пример vuejs.org/guide/computed.html#Computed-vs-Watched -Property для вычисления FullName .... - person maxxdev; 04.11.2016
comment
вы правы, но вы можете видеть, что используются значения модели, а в нашем случае мы используем это ... вы можете вычислить, но для этого вам нужна конкретная модальная / переменная - person Hardik Satasiya; 04.11.2016
comment
Спасибо за пояснение. Следующий шаг - найти способ сделать метод многоразовым для других компонентов :) - person maxxdev; 04.11.2016