526互联

【Vue】如何watch v-for中的元素属性值

发布时间 2023-04-25 21:26:40作者: 梦醒江南·Infinite

 

如果你想watch一个v-for中的变量，你可以在vue组件的watch对象中创建一个函数，来监听这个变量。

假设你有一个数组items，它是一个对象数组，你想要监听每个对象的name属性。那么你可以这样写：

<template>
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' }
      ]
    }
  },
  watch: {
    'items': {
      deep: true,
      handler(newVal, oldVal) {
        newVal.forEach((item, index) => {
          this.$watch(() => item.name, (newName, oldName) => {
            console.log(`item ${index}: ${oldName} -> ${newName}`)
          })
        })
      }
    }
  }
}
</script>

 

在这个例子中，我们定义了一个watch函数来监听items数组的变化。当数组中的某个元素的name属性发生变化时，这个函数就会被调用。

由于watch默认只监听对象的引用，而不会深层次地遍历对象内部的属性，因此我们需要将deep属性设置为true，这样watch会递归地监听数组内部的变化。

在handler函数中，我们遍历newVal中的每个元素，并使用$watch函数来监听每个元素的name属性。在回调函数中，我们可以打印出旧值和新值，或者执行其他操作。

需要注意的是，每当数组中的元素发生变化时，watch都会重新创建这个元素的$watch函数，因此如果你在一个循环中有大量的元素，这可能会导致性能问题。如果你需要监听一个大型的数组，你可能需要使用一些优化措施，如debounce或throttle。