用this.$set更新数组中的某一项

在 Vue.js 中，我们可以使用 `this.$set` 方法来更新数组中的某一项。该方法接收三个参数：数组，要更新项的索引和新值。

以下是一个示例：

// HTML
<template>
  <div>
    <p v-for="(item, index) in items" :key="index">
      <input type="text" v-model="item.name">
      <button @click="updateItem(index)">Update</button>
    </p>
  </div>
</template>

// JavaScript
<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' },
      ],
    };
  },
  methods: {
    updateItem(index) {
      const newItem = { name: `updated item${index + 1}` };
      this.$set(this.items, index, newItem);
    },
  },
};
</script>

在上面的示例中，我们使用 `v-for` 指令循环渲染数组中的每一项，并添加了一个输入框和一个“更新”按钮。当用户点击“更新”按钮时，调用 `updateItem` 方法来更新对应项的值。在 `updateItem` 方法中，我们创建了一个新的对象 `newItem`，然后通过 `this.$set` 方法将其设置为数组中的对应项。

需要注意的是，如果直接使用 `this.items[index] = newItem` 来更新数组中的某一项，则虽然界面上显示的值会更新，但 Vue.js 内部并不会触发响应式更新。因此，在更新数组中的某一项时，应该始终使用 `this.$set` 方法来确保响应式更新能够正常工作。