Vue.js:观看数组长度

Alf*_*ang 8 javascript mvvm ecmascript-6 vue.js

如何使用Vue.js观察数组长度?

Alf*_*ang 20

使用vm创建中的watch部分:

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
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

或者观察计算长度属性:

vm.$watch('item_length', function(newVal, oldVal) {
    console.log('caught!');
});
Run Code Online (Sandbox Code Playgroud)

  • 更简洁地说 `watch: { 'items.length'() { ... } }` (4认同)
  • 哦,您刚刚通过观看计算长度属性的想法将我从一些痛苦的黑客代码中解救出来! (2认同)

小智 5

在 vue3 设置中查看 items.length

import { watch } from "vue";
watch(
  () => items.length,
  (newValue,oldValue) => { console.log(newValue,oldValue)}
)
Run Code Online (Sandbox Code Playgroud)