Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan data Bagaimana untuk menyelesaikannya?

Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan data, bagaimana untuk menyelesaikannya?

Apabila membangun dengan Vue, atribut yang dikira ialah ciri yang sangat biasa digunakan dan berkuasa, yang boleh membantu kami mengira dan memproses data. Tetapi kadangkala kami menghadapi beberapa masalah, seperti tidak dapat menggunakan atribut yang dikira dengan betul untuk pengiraan data Pada masa ini kami perlu menyelesaikan masalah ini.

Berikut adalah contoh mudah untuk menggambarkan masalah ini:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    }
  }
}
</script>

Dalam contoh ini, kami ingin mengira jumlah num1 dan num2 dan memaparkan hasilnya pada halaman. Walau bagaimanapun, apabila kami menjalankan kod ini, kami mendapati halaman itu tidak memaparkan hasil yang kami jangkakan.

Punca masalah ini ialah apabila Vue mengira harta yang dikira, ia akan menilai bila untuk mengira semula berdasarkan hubungan kebergantungan. Dalam contoh ini, kami tidak memberitahu Vue secara eksplisit bahawa num1 dan num2 ialah kebergantungan bagi harta yang dikira, jadi Vue tidak akan mencetuskan pengiraan semula harta yang dikira secara automatik.

Untuk menyelesaikan masalah ini, kita perlu mengisytiharkan num1 dan num2 sebagai kebergantungan atribut yang dikira. Kita boleh menggunakan getter dan setter yang disediakan oleh Vue untuk mencapai ini:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result: {
      get() {
        return this.num1 + this.num2;
      },
      set(value) {
        const [num1, num2] = value.split("+");
        this.num1 = parseInt(num1);
        this.num2 = parseInt(num2);
      }
    }
  }
}
</script>

Dalam contoh ini, kami mengisytiharkan num1 dan num2 sebagai dependensi dengan menggunakan getter dan setter dalam harta yang dikira. Dalam pengambil, kami menambah num1 dan num2 dan mengembalikan hasilnya. Dalam setter, kita boleh menerima nilai baharu melalui penghuraian rentetan dan mengemas kini nilai num1 dan num2.

Dengan pengubahsuaian ini, apabila kami mengubah suai nilai num1 atau num2, Vue secara automatik akan mencetuskan pengiraan semula atribut yang dikira dan memaparkan hasil baharu pada halaman.

Selain menggunakan getter dan setter untuk mengisytiharkan kebergantungan, cara yang lebih mudah ialah menggunakan atribut jam tangan yang disediakan oleh Vue untuk memantau perubahan dalam num1 dan num2, dan melakukan pengiraan apabila ia berubah. Kodnya adalah seperti berikut:

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      num1: 10,
      num2: 20
    }
  },
  computed: {
    result() {
      return this.num1 + this.num2;
    }
  },
  watch: {
    num1(newValue) {
      this.result = newValue + this.num2;
    },
    num2(newValue) {
      this.result = this.num1 + newValue;
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan atribut jam tangan untuk mendengar perubahan dalam num1 dan num2, dan mengira semula nilai hasil apabila ia berubah. Dengan cara ini, sama ada num1 atau num2 berubah, keputusan akan dikira semula dan keputusan baharu akan dipaparkan pada halaman.

Melalui dua kaedah di atas, kami boleh menyelesaikan masalah tidak dapat menggunakan atribut yang dikira dengan betul untuk pengiraan data, dan mengemas kini keputusan yang dipaparkan pada halaman dengan betul.

Ringkasnya, masalah tidak dapat menggunakan atribut yang dikira dengan betul untuk pengiraan data biasanya disebabkan oleh tidak menyatakan kebergantungan secara eksplisit. Kami boleh mengisytiharkan kebergantungan melalui pengambil dan penetap atau jam tangan, dan mengira semula nilai harta yang dikira apabila kebergantungan berubah. Dengan cara ini, kita boleh menggunakan atribut yang dikira dengan betul untuk melakukan pengiraan data dan memaparkan keputusan pada halaman.

Atas ialah kandungan terperinci Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan data Bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!