Vue2 数组对象属性修改：双向绑定不失效

在Vue 2中，可以使用Vue.set方法或者this.$set方法来修改数组对象内的某个属性，以保证双向绑定不失效。

以下是一个示例：

// HTML模板
<template>
  <div>
    <ul>
      <li v-for='item in items' :key='item.id'>
        <input v-model='item.name'>
      </li>
    </ul>
    <button @click='changeName'>修改名称</button>
  </div>
</template>

// JavaScript代码
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    changeName() {
      // 修改数组对象内的name属性
      // 使用Vue.set或this.$set来保证双向绑定不失效
      this.$set(this.items[0], 'name', 'New Name');
    }
  }
};
</script>

在上述示例中，items数组包含了三个对象，每个对象都有一个name属性。当点击"修改名称"按钮时，会调用changeName方法来修改第一个对象的name属性。使用this.$set方法来修改属性，可以确保双向绑定能够正常工作，即输入框内的值会随之更新。