vue.js가 이벤트를 실행할 수 없으면 어떻게 해야 하나요?

vue.js는 vue가 vue 템플릿으로 구문 분석하고 렌더링하지 않기 때문에 이벤트를 트리거할 수 없습니다. 해결책은 v-html을 사용하는 것이 아니라 구성 요소 템플릿을 통해 프런트 엔드 데이터를 컴파일하고 렌더링하는 것입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue.js v-html은 클릭 이벤트를 실행할 수 없나요?

배경:

백엔드는 HTML 형식의 데이터를 프런트엔드에 반환하고 프런트엔드는 v-html을 사용하여 다음과 같이 구문 분석하고 렌더링합니다. a>, a 태그는 성공적으로 렌더링될 수 있지만 바인딩된 이벤트는 트리거될 수 없습니다.

원인:

vue가 이를 구문 분석하고 vue용 템플릿으로 렌더링하지 않았습니다.

해결책:

v-html을 사용하지 말고 구성 요소 템플릿 컴파일을 사용하세요

온라인 정보:

<template>
 <div class="hello">
  <h1>
   我是父组件
  </h1>
  <div class="parent" id="parent">
  </div>
 </div>
</template>
 
<script>
 import Vue from &#39;vue&#39;;
 var MyComponent = Vue.extend({
  template: &#39;<a @click="show(1)">我是大魔王</a>&#39;,
   methods: {  
   show(i) {
    console.log(i);
   },
  }
 });
 var component = new MyComponent().$mount();
 export default {
  data() {
   return {
   }
  },
  methods: {
  },
  mounted() {
   document.getElementById(&#39;parent&#39;).appendChild(component.$el);
  }
 }
</script>
 
<style scoped>
</style>

페이지:

콘솔:

【관련 추천 글: vue.js】

위 내용은 vue.js가 이벤트를 실행할 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!