2023Vue报错：无法正确使用$set方法更新嵌套属性，如何解决？

Vue报错：无法正确使用$set方法更新嵌套属性，如何解决？

在Vue的开发中，我们经常需要更新嵌套属性的值。通常情况下，我们可以使用Vue提供的$set方法来实现属性值的更新。然而，有时候我们会遇到一种情况，即无法正确使用$set方法更新嵌套属性，从而导致报错。本文将介绍这个问题的原因，并提供解决方案。

首先，让我们看一下具体的代码示例。假设我们有一个Vue组件，其中包含一个data属性dataObj，其中有一个嵌套属性nestedObj。

<template>
  <div>
    <p>嵌套属性的值为：{{ dataObj.nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj() {
      this.$set(this.dataObj, 'nestedObj', '新值');
    }
  }
};
</script>

在这个例子中，当我们点击按钮时，应该会更新嵌套属性nestedObj的值为新值。然而，如果我们运行这段代码，我们会发现一个报错：TypeError: Cannot convert undefined or null to object。

这个报错的原因有两个方面。首先，我们使用$set方法时，需要确保嵌套属性的父级对象已经被初始化为一个对象。也就是说，我们不能直接在一个未定义或为null的对象上创建一个嵌套属性。

其次，Vue的响应式系统对于嵌套属性的变化侦测是有限制的。当我们使用$set方法添加或更新属性时，Vue无法检测到嵌套属性的变化，从而无法正确地将变化应用到视图上。

为了解决这个问题，我们可以采取以下两种方案之一。

第一种方案是使用$emit方法将属性的变化从子组件传递给父组件，然后在父组件中使用$set方法更新对应的嵌套属性。这样做的好处是，我们可以确保父组件中的数据始终是响应式的，从而保证视图的一致性。代码示例如下：

// 子组件
<template>
  <div>
    <p>嵌套属性的值为：{{ nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  props: ['nestedObj'],
  methods: {
    updateNestedObj() {
      this.$emit('update:nestedObj', '新值');
    }
  }
};
</script>

// 父组件
<template>
  <div>
    <child-component :nestedObj="dataObj.nestedObj" @update:nestedObj="updateNestedObj"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj(newValue) {
      this.$set(this.dataObj, 'nestedObj', newValue);
    }
  }
};
</script>

第二种方案是通过改变嵌套属性的引用来实现更新。我们可以通过创建一个新的对象，并使用Object.assign()方法将旧的属性复制到新的对象中，然后引用新的对象来替代旧的对象。这样做的好处是，Vue能够正确地侦测到嵌套属性的变化，并将变化应用到视图上。代码示例如下：

<template>
  <div>
    <p>嵌套属性的值为：{{ dataObj.nestedObj }}</p>
    <button @click="updateNestedObj">更新嵌套属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        nestedObj: '默认值'
      }
    };
  },
  methods: {
    updateNestedObj() {
      this.dataObj = Object.assign({}, this.dataObj, {
        nestedObj: '新值'
      });
    }
  }
};
</script>

综上所述，当我们遇到无法正确使用$set方法更新嵌套属性时，我们可以采用使用$emit方法或改变属性的引用这两种方案来解决这个问题。这样可以确保我们的代码能够正确地更新嵌套属性，并保持视图的一致性。