acara vue tidak dapat mencari kaedah

Apabila menggunakan Vue, kami sering menghadapi masalah: kaedah tersuai tidak boleh dipanggil oleh tika Vue, menyebabkan halaman tidak dapat bertindak balas kepada acara interaktif seperti klik. Masalah ini kelihatan mudah, tetapi sebenarnya ia menyusahkan ramai pemaju. Artikel ini akan menerangkan secara terperinci sebab dan penyelesaian mengapa acara Vue tidak dapat mencari kaedah.

Penerangan Masalah

Apabila mentakrifkan kaedah dalam komponen Vue, mereka selalunya perlu ditakrifkan dalam objek kaedah. Contohnya:

Vue.component('my-component', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

Kod di atas mentakrifkan komponen Vue bernama "komponen saya", yang mengandungi butang Apabila butang diklik, kaedah handleClick akan dipanggil dan kotak gesaan akan muncul. Walau bagaimanapun, dalam pembangunan sebenar, kita kadang-kadang menghadapi situasi sedemikian: selepas mengklik butang, tiada kotak gesaan muncul, dan tiada respons. Ini kerana Vue tidak dapat mencari kaedah dan tidak boleh mengikatnya pada acara.

Penyelesaian

Terdapat banyak sebab untuk masalah ini, tetapi kita boleh mula mencari penyelesaian dari aspek berikut.

1. Semak penamaan

Pertama, kita harus menyemak sama ada kaedah itu dinamakan dengan betul. Jika nama kaedah dieja dengan salah atau menggunakan huruf besar yang salah, Vue tidak akan dapat mencari kaedah dan tidak akan dapat melaksanakannya. Dalam kod di bawah, nama kaedah hendaklah handleClick, bukan handleclick atau HandleClick.

Vue.component('my-component', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

2. Semak skop komponen

Komponen Vue mempunyai konsep skop, iaitu kaedah yang ditakrifkan dalam komponen hanya boleh dipanggil oleh komponen tersebut. Jika kita mentakrifkan kaedah dalam komponen, tetapi memanggil kaedah dalam komponen lain atau contoh akar, Vue tidak akan menemui kaedah tersebut. Oleh itu, apabila menggunakan komponen Vue, kita perlu memahami dengan jelas skop setiap komponen untuk memastikan kaedah dipanggil dengan betul.

Sebagai contoh, dalam kod di bawah, kami mentakrifkan dua komponen, komponen saya1 dan komponen2 saya. Kesemuanya mengandungi butang, dan apabila butang itu diklik, kaedah handleClick dipanggil. Walau bagaimanapun, apabila kami mengisytiharkan kedua-dua my-component1 dan my-component2 dalam contoh akar, tidak semua butang boleh bertindak balas terhadap peristiwa klik dengan betul.

Vue.component('my-component1', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked by component 1');
    }
  }
});

Vue.component('my-component2', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked by component 2');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('clicked by root');
    }
  }
});

Sebabnya ialah dalam Vue, setiap komponen mempunyai skopnya sendiri, dan kaedah yang ditakrifkan dalam tika akar hanya boleh dipanggil oleh tika akar dan tidak boleh dipanggil oleh sub-komponen. Jika kita ingin memanggil kaedah dalam komponen kanak-kanak, kaedah itu harus ditakrifkan dalam komponen anak yang sepadan, bukan dalam contoh akar.

new Vue({
  el: '#app',
  components: {
    'my-component1': {
      template: '<button @click="handleClick">Click me</button>',
      methods: {
        handleClick() {
          alert('clicked by component 1');
        }
      }
    },
    'my-component2': {
      template: '<button @click="handleClick">Click me</button>',
      methods: {
        handleClick() {
          alert('clicked by component 2');
        }
      }
    }
  }
});

3. Semak sintaks dalam templat

Akhir sekali, kita juga harus menyemak ketepatan sintaks dalam templat. Terdapat banyak sintaks khas dalam templat Vue, seperti arahan, ungkapan, dsb. Jika anda salah menulis sintaks ini, Vue tidak akan dapat mencari kaedah tersebut. Sebagai contoh, dalam kod berikut, kami menulis @click dan bukannya @ckick, menyebabkan kaedah tidak terikat dengan betul pada acara klik.

Vue.component('my-component', {
  template: '<button @ckick="handleClick">Click me</button>',
  methods: {
    handleClick() {
      alert('clicked');
    }
  }
});

Perlu diingatkan bahawa Vue tidak menyediakan cara untuk mengetahui sama ada acara itu terikat dengan betul kepada kaedah tersebut. Ini terutamanya kerana pengikatan acara Vue adalah berdasarkan rentetan, dan pengkompil tidak akan melaporkan ralat apabila rentetan dieja dengan salah, jadi kami perlu menyemak kod dengan teliti untuk memastikan ketepatan sintaks.

Ringkasan

Acara Vue tidak dapat mencari kaedah ialah masalah biasa, biasanya atas tiga sebab: ralat penamaan, ralat skop, ralat sintaks templat. Semasa proses menulis kod, kita harus memberi perhatian kepada perkara di atas untuk memastikan ketepatan kod dan mengelakkan masalah sedemikian.

Atas ialah kandungan terperinci acara vue tidak dapat mencari kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!