Bagaimana untuk menyelesaikan ralat "[Vue warn]: Tidak boleh menetapkan untuk membaca harta sahaja".

Cara menyelesaikan ralat "[Vue warn]: Tidak boleh menetapkan untuk membaca hanya harta" ralat

Semasa proses pembangunan menggunakan Vue.js, kami sering menghadapi beberapa gesaan ralat. Salah satu ralat biasa ialah "[Vue warn]: Tidak boleh menetapkan untuk membaca sahaja harta". Ralat ini biasanya disebabkan oleh cuba mengubah suai sifat baca sahaja dalam contoh Vue. Artikel ini memperincikan punca ralat ini dan menyediakan penyelesaian serta contoh kod yang berkaitan.

Punca ralat

Terdapat dua jenis data dalam Vue: data responsif dan data tidak responsif. Data reaktif ialah data dalam contoh Vue Apabila data berubah, Vue akan mengemas kini paparan secara automatik. Data tidak responsif merujuk kepada data di luar tika Vue, dan Vue tidak akan menjejaki perubahannya.

Apabila kami menggunakan Vue untuk mengikat data, Vue akan menukar data kepada data reaktif. Walau bagaimanapun, jika kami cuba mengubah suai sifat baca sahaja, ralat "[Vue warn]: Cannot assign to read only property" akan muncul.

Penyelesaian

Cara untuk menyelesaikan ralat ini adalah untuk mengelakkan mengubah suai sifat baca sahaja. Mengikut mesej ralat, kita boleh menentukan atribut mana yang telah diubah suai dengan tidak betul. Seterusnya, kami akan memperkenalkan dua situasi biasa dan penyelesaian yang sepadan.

Senario 1: Ubah suai atribut props

Apabila menggunakan atribut props untuk menghantar data daripada komponen induk kepada komponen anak, atribut props adalah baca sahaja. Oleh itu, jika kita cuba mengubah suai atribut props dalam komponen anak, ralat ini akan muncul. Untuk menyelesaikan masalah ini, kita harus menggunakan kaedah khas yang disediakan oleh Vue, iaitu menggunakan peristiwa untuk mengemas kini sifat komponen induk.

Berikut ialah contoh kod yang menunjukkan cara menggunakan atribut props dengan betul:

// 父组件
<template>
  <div>
    <child-component :message="message" @updateMessage="updateMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    changeMessage() {
      this.$emit('updateMessage', 'New Message');
    }
  }
}
</script>

Dalam contoh ini, komponen induk menghantar mesej kepada komponen anak melalui atribut props. Peristiwa klik butang dalam komponen kanak-kanak memanggil kaedah changeMessage dan menggunakan this.$emit untuk mencetuskan acara tersuai untuk menghantar semula mesej baharu kepada kaedah updateMessage dalam komponen induk. Dengan cara ini kita mengelak daripada mengubah suai sifat prop baca sahaja.

Senario 2: Ubah suai sifat yang dikira

Sifat yang dikira ialah sifat yang dikira berdasarkan sifat lain dan mempunyai fungsi caching dalam Vue. Secara lalai, sifat yang dikira adalah baca sahaja. Jika kami cuba mengubah suai nilai harta yang dikira, ralat "[Vue warn]: Cannot assign to read only property" akan turut muncul. Untuk menyelesaikan masalah ini, kita harus mengubah suai sifat pergantungan bagi sifat yang dikira.

Berikut ialah kod sampel yang menunjukkan cara menggunakan sifat terkira dan sifat bergantung dengan betul:

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan model v untuk mengikat nilai kotak input masing-masing pada sifat firstName dan lastName. Nama penuh harta yang dikira mengira nama penuh berdasarkan nama pertama danNama akhir. Ambil perhatian bahawa dalam fungsi set harta yang dikira, kami mengubah suai sifat bergantung, bukan sifat yang dikira itu sendiri. Dengan cara ini, kami mengelakkan ralat mengubah suai sifat baca sahaja.

Ringkasan

Dalam pembangunan Vue, kami sering menghadapi ralat "[Vue warn]: Tidak boleh menetapkan untuk membaca hanya harta". Ralat ini biasanya disebabkan oleh cuba mengubah suai sifat baca sahaja. Untuk menyelesaikan ralat ini, kita harus mengelak daripada mengubah suai sifat baca sahaja. Untuk situasi yang berbeza, kami boleh menggunakan peristiwa untuk mengemas kini atribut props atau mengubah suai atribut kebergantungan atribut yang dikira untuk menyelesaikan masalah ini. Saya harap penyelesaian dan contoh kod dalam artikel ini berguna!

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan ralat "[Vue warn]: Tidak boleh menetapkan untuk membaca harta sahaja".. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!