v-module을 사용할 때 div 내에서 작동하지 않는 이벤트를 클릭합니다. - vue js

v-module을 사용할 때 div 내에서 작동하지 않는 이벤트를 클릭합니다. - vue js

하나 있어.contenteditable divraw html 추가(클릭 이벤트 포함)v-html그러나 이 경우 클릭 이벤트가 작동하지 않습니다.요소를 검사하면 div에서 클릭 이벤트가 발생하지만 여전히 작동하지 않습니다.

클릭 이벤트로 다른 div를 하드코드하면contenteditable div잘 되고 있어.내가 제대로 하고 있는지 모르겠다.:

<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");
}

@HermantSahv-html다음과 같은 Vue 디렉티브는 구속되지 않습니다.@click이벤트입니다.여기를 참조해 주세요.

회피책으로서는 다음과 같은 것을 사용할 수 있습니다.@click부모 div 및 템플릿 문자열의 event를 지정하면 ID와 같이 요소에 구분할 수 있는 무언가를 얻을 수 있습니다.
그런 다음 이벤트를 인터셉트하고 클릭된 요소를 확인할 수 있습니다.요소가 템플릿 문자열의 요소와 일치하는 경우 등을 수행합니다.다음은 대략적인 예입니다.

<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')
    }
  }
}

내 생각에는 모든 게 좀 지저분하게 느껴져.당신이 원하는 것을 성취할 수 있는 더 쉬운 방법이 있을지도 모릅니다.

언급URL : https://stackoverflow.com/questions/70417906/click-event-not-working-inside-div-when-v-html-used-vue-js