Klik acara tidak berfungsi di dalam div apabila menggunakan v-html - vue js

Question

Saya ada contenteditable div 并使用 v-html menambah html mentah termasuk acara klik. Tetapi dalam kes ini acara klik tidak berfungsi. Memeriksa elemen menunjukkan terdapat acara klik pada div tetapi ia masih tidak berfungsi.

Jika saya hardcode mana-mana div lain dengan acara klik dalam contenteditable div maka ia berfungsi. Tidak tahu sama ada saya melakukan ini dengan betul. :

<div id="div_textarea2" v-html="temp_testing_div2" contenteditable="true"></div>


   data () {
    return {
          temp_testing_div2: `<div @click="ClickLine">Click this</div>`,

}
}


   ClickLine(){
   alert("Clicked");
}

Answer 1

@HermantSah v-html 不会绑定任何 Vue 指令，例如 @click acara. Lihat dokumentasi di sini.

Penyelesaian mungkin ialah menetapkan acara @click pada div induk dan memberikan elemen sesuatu yang boleh dibezakan, seperti id, dalam rentetan templat.
Anda kemudian boleh memintas acara itu dan menyemak elemen yang telah diklik. Jika elemen itu sepadan dengan elemen dalam rentetan templat, lakukan sesuatu, dsb. Berikut adalah contoh kasar.

...  
// in your script section
data() {
  return {
    temp_testing_div2: `
Click this
`,
  }
},
methods: {
  handleLineClick(e) {
    let clickedElId = e.target.id
    if (clickedElId === 'temp_testing_div2') {
      console.log("temp_testing_div2 clicked!", e)
    } else {
      console.log('another element was clicked')
    }
  }
}

Semuanya terasa agak mengelirukan pada pendapat saya. Mungkin ada cara yang lebih mudah untuk mencapai keinginan anda.