Vue中,如何watch数组中所有对象的某个属性的变化?

rossroma
  • 188
      items: [
        {
          id: 336,
          title: '智利三文鱼扒500g酸甜口味爆炒',
          img: '../assets/images/test/8-1.jpg',
          count: 1,
          price1: 106,
          price2: 80
        },
        {
          id: 337,
          title: '西班牙三文鱼扒500g酸甜口味爆炒',
          img: '../assets/images/test/8-1.jpg',
          count: 2,
          price1: 225,
          price2: 152
        }
      ]

如上代码,我要求count的和,当任意count的值产生变化是,就要更新count的和,请问如何监听所有count的值得变化呢?


感谢大神们的回答,不过我的问题是如何监听所有count值得变化?以便触发下一步操作

回复
阅读 16.1k
2 个回答
✓ 已被采纳

用计算属性,返回值是这个列表值相加

computed: {
    countTotal: function () {
        let total = 0;
        this.items.forEach(function (item) {
            total += item.count
        })
        return total
    }
}

监听用 watch选项

watch: {
    items: {
        handler: function () {},
        deep: true
    }
}

对象要深复制,默认是浅复制

监听(或按照楼上的计算属性)这整个数组变量,再遍历相加试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏