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

百变鹏仔 3个月前 (09-25) #VUE

文章标签嵌套

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

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

<template>  <div>    <p>嵌套属性的值为：{{ dataObj.nestedObj }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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方法或改变属性的引用这两种方案来解决这个问题。这样可以确保我们的代码能够正确地更新嵌套属性，并保持视图的一致性。

文章推荐

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

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器