Vuejs2 - computed property in components

Question

I have a component to display names. I need to calculate number of letters for each name. I added nameLength as computed property but vuejs doesn't determine this property in loop.

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/

So result expected

mike-4

arnold-6

tony-4

Answer 1

it seems there is some misunderstanding about computed property. I have created fork from you fiddle, it will work as you needed.

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

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

in comment it shows that "calculate length of current item" but js cant get the concept of current item

this.length

this will execute length on Vue component it self not on that value.

computed property work on other property of instance and return value.

but here you are not specifying anything to it and used this so it wont able to use any property.

if you need any more info please comment.