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

tony-4

Answer 1

似乎对计算属性存在一些误解。 我已经从你的小提琴中创建了 fork，它会根据你的需要工作。

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

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

在评论中显示“计算当前项目的长度” 但是js无法获取当前项目的概念

this.length

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

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

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

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