vue如何修改data中的obj数据的属性

修改Vue中data对象中的属性是一个基本的功能，而访问深度嵌套的对象时可能略有不同。下面是使用Vue修改data中嵌套对象属性的攻略：

访问对象中的嵌套属性

假设我们有以下data对象：

data() {
  return {
    user: {
      id: 1,
      name: '张三',
      address: {
        city: '北京',
        street: '朝阳区'
      }
    }
  }
}

如果我们想更新address的street属性，我们可以使用下面的代码：

this.user.address.street = '海淀区';

但是这种写法是不建议的，因为Vue框架是响应式的，需要使用Vue提供的方法才能正确更新数据。

使用Vue.set更新嵌套对象属性

Vue提供了一个方法来修改嵌套对象中的属性。它是Vue.set(对象,属性名,更新的值)。

如下所示：

Vue.set(this.user.address, 'street', '海淀区');

在这种情况下，Vue将检测这个对象的变化并更新视图。

使用对象解构更新嵌套对象属性

我们也可以使用对象解构来更新嵌套对象中的属性。这种方法适用于不需要采取更多功能的情况。

例如，我们可以使用以下代码：

const { user } = this;
const { address } = user;
address.street = '丰台区';

这种写法与第一种方法非常相似，不建议采取。

示例

我们来模拟一个列表的场景。列表项包含一个学生和一个它所在的学校。我们将使用Vue.set()来更新学校属性。

<template>
  <div>
    <ul>
      <li v-for="student in students" :key="student.id">
        <h2>{{ student.name }}</h2>
        <p>{{ student.school.name }}</p>
        <button @click="updateSchool(student)">修改学校</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        {
          id: 1,
          name: '张三',
          school: {
            id: 1,
            name: '清华大学'
          }
        },
        {
          id: 2,
          name: '李四',
          school: {
            id: 2,
            name: '北京大学'
          }
        }
      ]
    }
  },
  methods: {
    updateSchool(student) {
      Vue.set(student.school, 'name', '北京理工大学');
    }
  }
}
</script>

在这个示例中，我们添加了一个按钮，当用户单击按钮时，我们调用updateSchool()方法并传入学生对象。updateSchool()方法将使用Vue.set()来更新学校的名字。