Tengo un div contenteditable y agrego html sin procesar que incluye un evento de clic usando v-html . Pero el evento de clic no funciona en este caso. La inspección de elementos muestra que hay un evento de clic en el div, pero aún así no funcionará.
Si codifico cualquier otro div con evento de clic dentro de div contenteditable , entonces está funcionando. No se si lo estoy haciendo bien. :
<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"); }@HermantSah v-html no vinculará ninguna directiva de Vue, como los eventos @click . Ver documentos aquí .
Una solución alternativa podría ser tener el evento @click en el div principal y en la cadena de su plantilla darle al elemento algo distinguible, como una identificación.
Luego podría interceptar el evento y verificar en qué elemento se hizo clic. Si el elemento coincide con el de la cadena de su plantilla, haga algo, etc. Un ejemplo aproximado a continuación.
<div id="div_textarea2" v-html="temp_testing_div2" @click="handleLineClick" contenteditable="true"></div> ... // in your script section data() { return { temp_testing_div2: `<div id="temp_testing_div2">Click this</div>`, } }, 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') } } }Todo se siente un poco desordenado, aunque en mi opinión. Puede haber una manera más fácil de lograr lo que deseas.