vue中更改数组中属性,在页面中不生效的解决方法

当我们在vue中操作数组时，如果直接更改数组中某个元素的属性值，它并不会立即更新页面。这是因为vue在数据劫持时，只会劫持数组中响应式元素的访问和操作，而不会观察数组元素的属性变化。

要解决这个问题，我们可以使用以下两种方法：

1. 使用$set方法

vue提供了$set方法，用来修改数组中的属性值，并触发响应式更新。$set方法的语法如下：

Vue.set( target, key, value )

其中，target是要操作的数组，key是要修改属性值的元素下标，value是要设置的新属性值。

我们可以通过以下示例来演示：

<template>
  <div>
    <div>{{ fruits[0].name }}</div>
    <button @click="changeFruit">更改水果名字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: 'apple', price: 5 },
        { name: 'banana', price: 3 },
      ],
    };
  },
  methods: {
    changeFruit() {
      // 直接修改属性值，不会触发响应式更新
      this.fruits[0].name = 'pear';
      // 使用$set方法修改属性值，会触发响应式更新
      this.$set(this.fruits[0], 'name', 'pear');
    },
  },
};
</script>

在上述示例中，我们定义了一个数组fruits，每个元素都包含name和price两个属性。在changeFruit方法中，我们同时使用了两种方式修改fruits[0]元素的name属性，可以发现使用$set方法时会触发响应式更新，而直接修改属性值时则不会。

2. 使用splice方法

vue提供了splice方法，它可以删除或添加数组元素，并触发响应式更新。我们可以通过删除再添加的方式来修改数组元素属性值。

我们可以通过以下示例来演示：

<template>
  <div>
    <ul>
      <li v-for="fruit in fruits" :key="fruit.name">
        {{ fruit.name }} - {{ fruit.price }}
        <button @click="changeFruit(fruit)">更改水果名字</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: 'apple', price: 5 },
        { name: 'banana', price: 3 },
      ],
    };
  },
  methods: {
    changeFruit(fruit) {
      // 删除数组元素并记录其下标
      const index = this.fruits.indexOf(fruit);
      this.fruits.splice(index, 1);
      // 添加新的数组元素，属性值已更改
      const newFruit = { ...fruit, name: 'pear' };
      this.fruits.push(newFruit);
    },
  },
};
</script>

在上述示例中，我们通过v-for渲染出了一个数组，每个元素都可以通过“更改水果名字”按钮来触发changeFruit方法。在changeFruit中，我们首先使用splice方法删除数组中指定的元素，并记录其下标，再利用新的水果名创建一个新的数组元素，最后使用push方法将新元素添加到数组中。由于splice和push方法都会触发响应式更新，页面中的数据会自动更新显示。