Selesaikan ralat Vue: Tidak dapat menggunakan atribut mendengar jam tangan dengan betul

Penyelesaian kepada ralat Vue: Tidak dapat menggunakan atribut mendengar menonton dengan betul

Vue ialah rangka kerja pembangunan bahagian hadapan yang sangat popular, tetapi semasa penggunaan, kami mungkin menghadapi beberapa ralat dan ralat. Salah satu masalah yang lebih biasa ialah ketidakupayaan untuk menggunakan jam tangan dengan betul untuk memantau hartanah. Dalam artikel ini, kami akan menerangkan punca masalah ini dan memberikan beberapa penyelesaian.

Mula-mula, mari lihat kod sampel ringkas:

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message: {
      handler: function (newValue, oldValue) {
        console.log('message changed')
      }
    }
  }
}
</script>

Dalam contoh di atas, kami menentukan sifat mesej dalam komponen Vue dan mengikatnya pada elemen input menggunakan model v. Pada masa yang sama, kami juga menggunakan jam tangan untuk memantau perubahan dalam atribut mesej.

Walau bagaimanapun, apabila kami cuba menjalankan kod ini dalam penyemak imbas, kami mungkin menghadapi mesej ralat berikut: [Vue warn]: $watch bukan fungsi.

Sebab ralat ini ialah kaedah penulisan atribut jam tangan telah berubah dalam versi Vue 2.0. Dalam versi sebelum Vue 2.0, kami boleh menentukan secara langsung fungsi pemprosesan dalam atribut jam tangan untuk mendengar perubahan dalam atribut. Tetapi dalam Vue 2.0 dan versi yang lebih baru, kita perlu menggunakan cara penulisan baharu untuk mentakrifkan atribut jam tangan.

Cara untuk menyelesaikan ralat ini adalah dengan menentukan atribut jam tangan mengikut kaedah penulisan baharu. Ubah suai kod sampel di atas seperti berikut:

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('message changed')
    }
  }
}
</script>

Dalam cara penulisan baharu, kami tidak lagi menggunakan atribut pengendali untuk mentakrifkan fungsi pemprosesan, tetapi terus menulis fungsi dalam atribut jam tangan.

Apabila kami menjalankan kod yang diubah suai dalam penyemak imbas, kami akan mendapati atribut jam tangan boleh memantau dengan betul perubahan dalam atribut mesej dan tiada lagi ralat akan berlaku.

Untuk meringkaskan, cara untuk menyelesaikan masalah yang Vue tidak boleh menggunakan atribut mendengar jam tangan dengan betul ialah menggunakan kaedah penulisan selepas Vue 2.0 pada kod. Iaitu, tulis fungsi pemprosesan terus dalam atribut jam tangan tanpa menggunakan atribut pengendali.

Saya harap kandungan artikel ini dapat membantu anda menyelesaikan masalah ini dan menggunakan Vue dengan lebih baik untuk membangunkan aplikasi bahagian hadapan. Jika anda mempunyai soalan lain yang berkaitan, sila tinggalkan mesej untuk perbincangan. Selamat berprogram!

Atas ialah kandungan terperinci Selesaikan ralat Vue: Tidak dapat menggunakan atribut mendengar jam tangan dengan betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!