Ralat Vue: Kaedah $set tidak boleh digunakan dengan betul untuk mengemas kini sifat bersarang Bagaimana untuk menyelesaikannya?

Ralat Vue: Kaedah $set tidak boleh digunakan dengan betul untuk mengemas kini sifat bersarang Bagaimana untuk menyelesaikannya?

Dalam pembangunan Vue, kita sering perlu mengemas kini nilai hartanah bersarang. Biasanya, kita boleh menggunakan kaedah $set yang disediakan oleh Vue untuk mengemas kini nilai hartanah. Walau bagaimanapun, kadangkala kita menghadapi situasi di mana kaedah $set tidak boleh digunakan dengan betul untuk mengemas kini sifat bersarang, mengakibatkan ralat. Artikel ini akan menerangkan punca masalah ini dan memberikan penyelesaian.

Mula-mula, mari lihat contoh kod tertentu. Katakan kita mempunyai komponen Vue yang mengandungi data property dataObj, yang mempunyai nested property nestedObj di dalamnya.

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

Dalam contoh ini, apabila kita mengklik butang, nilai sifat nestedObj harus dikemas kini kepada nilai baharu. Walau bagaimanapun, jika kami menjalankan kod ini, kami akan menemui ralat: TypeError: Tidak boleh menukar yang tidak ditentukan atau null kepada objek.

Terdapat dua sebab untuk laporan ralat ini. Pertama, apabila kita menggunakan kaedah $set, kita perlu memastikan bahawa objek induk bagi harta bersarang telah dimulakan sebagai objek. Iaitu, kita tidak boleh terus mencipta sifat bersarang pada objek yang tidak ditentukan atau null.

Kedua, sistem responsif Vue mempunyai had dalam mengesan perubahan dalam sifat bersarang. Apabila kami menggunakan kaedah $set untuk menambah atau mengemas kini sifat, Vue tidak dapat mengesan perubahan dalam sifat bersarang dan tidak boleh menggunakan perubahan pada paparan dengan betul.

Untuk menyelesaikan masalah ini, kita boleh mengambil salah satu daripada dua pilihan berikut.

Penyelesaian pertama ialah menggunakan kaedah $emit untuk menghantar perubahan sifat daripada komponen anak kepada komponen induk, dan kemudian gunakan kaedah $set dalam komponen induk untuk mengemas kini sifat bersarang yang sepadan. Kelebihan ini ialah kami dapat memastikan bahawa data dalam komponen induk sentiasa responsif, sekali gus memastikan ketekalan pandangan. Contoh kod adalah seperti berikut:

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

Pilihan kedua ialah mengemas kini dengan menukar rujukan harta bersarang. Kita boleh menggantikan objek lama dengan mencipta objek baharu, menyalin sifat lama ke objek baharu menggunakan kaedah Object.assign() dan kemudian merujuk objek baharu. Kelebihan ini ialah Vue boleh mengesan perubahan dalam sifat bersarang dengan betul dan menggunakan perubahan pada paparan. Contoh kod adalah seperti berikut:

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

Ringkasnya, apabila kami menghadapi ketidakupayaan untuk menggunakan kaedah $set dengan betul untuk mengemas kini sifat bersarang, kami boleh menggunakan kaedah $emit atau menukar rujukan harta untuk menyelesaikan masalah ini. Ini memastikan bahawa kod kami mengemas kini sifat bersarang dengan betul dan mengekalkan ketekalan paparan.

Atas ialah kandungan terperinci Ralat Vue: Kaedah $set tidak boleh digunakan dengan betul untuk mengemas kini sifat bersarang Bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!