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/

所以结果是预期的

麦克-4

阿诺德-6

托尼-4

Answer 1

似乎对计算 属性 存在一些误解。 我已经从你那里创建了 fork fiddle，它将根据你的需要工作。

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

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

在评论中显示 "calculate length of current item" 但是js无法获取当前item的概念

this.length

这将在 Vue 组件上执行长度，而不是在该值上。

计算 属性 在其他 属性 实例和 return 值上工作。

但在这里您没有指定任何内容并使用了它，因此它无法使用任何 属性.

如果您需要更多信息，请发表评论。