Vue error: The $set method cannot be used correctly to update nested properties. How to solve it?

Vue error: The $set method cannot be used correctly to update nested properties. How to solve it?

In the development of Vue, we often need to update the values ​​of nested properties. Normally, we can use the $set method provided by Vue to update property values. However, sometimes we encounter a situation where the $set method cannot be used correctly to update nested properties, resulting in an error. This article will describe the cause of this problem and provide a solution.

First, let's look at a specific code example. Let's say we have a Vue component that contains a data property dataObj, which has a nested property nestedObj within it.

<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>

In this example, when we click the button, the value of the nestedObj property should be updated to the new value. However, if we run this code, we will find an error: TypeError: Cannot convert undefined or null to object.

There are two reasons for this error. First, when we use the $set method, we need to ensure that the parent object of the nested property has been initialized as an object. That is, we cannot directly create a nested property on an undefined or null object.

Secondly, Vue's responsive system has limitations on change detection of nested properties. When we use the $set method to add or update properties, Vue cannot detect changes in nested properties and cannot correctly apply the changes to the view.

In order to solve this problem, we can take one of the following two solutions.

The first solution is to use the $emit method to pass the property changes from the child component to the parent component, and then use the $set method in the parent component to update the corresponding nested properties. The advantage of this is that we can ensure that the data in the parent component is always responsive, thus ensuring the consistency of the view. The code example is as follows:

// 子组件
<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>

The second option is to update by changing the reference of the nested attribute. We can replace the old object by creating a new object, copying the old properties to the new object using the Object.assign() method, and then referencing the new object. The advantage of this is that Vue can correctly detect changes in nested properties and apply the changes to the view. The code example is as follows:

<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>

To sum up, when we encounter the inability to correctly use the $set method to update nested properties, we can use the $emit method or change the reference of the property to solve the problem. this problem. This ensures that our code updates nested properties correctly and maintains view consistency.

The above is the detailed content of Vue error: The $set method cannot be used correctly to update nested properties. How to solve it?. For more information, please follow other related articles on the PHP Chinese website!