Vue.js: watch array length

Question

How can I watch an array length using Vue.js?

Solution

Use the watch section in your vm creation:

var vm = new Vue({
    el: 'body',
    data: {
        items: []
    },
    computed: {
        item_length: function () {
            return this.battle_logs.length;
        }
    },
    watch: {
        items: {
            handler: function () {
                console.log('caught!');
            },
            deep: true
        }
    }
});

Or watch a computed length attribute:

vm.$watch('item_length', function(newVal, oldVal) {
    console.log('caught!');
});

Comments

[Michael Cordingley]

Oh, you just saved me from some painfully hackish code with that idea of watching a computed length attribute!

[diachedelic]

more concisely watch: { 'items.length'() { ... } }