组件中的Vuejs2计算属性

Question

我有一个组件来显示名字。我需要计算每个名字的字母数。我添加了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/

所以结果是预期的

mike-4

阿诺德-6

托尼-4

Answer 1

似乎对计算属性有一些误解。我已经从你的小提琴创建了叉子，它将按照你的需要工作。

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

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

在注释中，它显示“计算当前项的长度”，但是js不能得到当前项的概念。

this.length

这将对Vue组件本身执行长度，而不是对该值执行长度。

计算属性作用于实例的其他属性和返回值。

但是在这里，你没有给它指定任何东西，并使用了这个，所以它不能使用任何属性。

如果您需要更多信息，请留言。