What should I do if vue.js cannot trigger events?

vue.js cannot trigger the event because vue does not parse and render it as a vue template. The solution is not to use v-html, but to compile and render the front-end data through the component template.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

vue.js v-html cannot trigger click event?

Background:

The backend returns data in html format to the frontend, and the frontend uses v-html to parse and render, such as: , the a tag can be rendered successfully, but the event bound to it cannot be triggered.

Cause:

vue does not parse and render it as a vue template

Solution:

Don’t use v-html but component template compilation

Online information:

<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>

Page:

Console:

【Recommended related articles: vue.js】

The above is the detailed content of What should I do if vue.js cannot trigger events?. For more information, please follow other related articles on the PHP Chinese website!