v-html - vue js를 사용할 때 div 내에서 클릭 이벤트가 작동하지 않습니다.

Question

클릭 이벤트를 포함하여 원시 HTML을 contenteditable div 并使用 v-html 추가하고 있습니다. 하지만 이 경우 클릭 이벤트가 작동하지 않습니다. 요소를 검사하면 div에 클릭 이벤트가 있음이 표시되지만 여전히 작동하지 않습니다.

contenteditable div의 클릭 이벤트로 다른 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");
}

Answer 1

@HermantSah v-html 不会绑定任何 Vue 指令，例如 @click 이벤트. 여기 문서를 참조하세요.

해결 방법은 상위 div에 @click 이벤트를 설정하고 템플릿 문자열에서 요소에 ID와 같은 구별 가능한 항목을 제공하는 것입니다.
그런 다음 해당 이벤트를 가로채서 어떤 요소가 클릭되었는지 확인할 수 있습니다. 요소가 템플릿 문자열의 요소와 일치하는 경우 무언가를 수행하십시오. 다음은 대략적인 예입니다.

으아아아

제 생각에는 모든 것이 약간 혼란스러운 것 같습니다. 당신의 소원을 이루는 더 쉬운 방법이 있을 수도 있습니다.