Html tags returned by the rendering interface in vue and binding event processing on the tags

Table of contents

I. Introduction

2. Use steps

1. Introduce vue

2. Generate constructors and create subclasses

 3. Problems encountered

---

1. Foreword

        In the past two days, there is a need in the work to render the html tags returned by the interface. The v-html used at the beginning can be rendered, but the event bound to the a tag cannot be triggered, and then the parameters bound to the event are Can't get it, and finally use the template to solve it successfully

2. Use steps

1. Introduce vue

code show as below:

import Vue from 'vue/dist/vue.esm.js'

Note: The initial reference method is  import Vue from 'vue' , and the result will report an error

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
 

2. Generate constructors and create subclasses

code show as below:

<template>
  <div id='parent'>

  </div>
</template>
import Vue from 'vue/dist/vue.esm.js'
export default {
  data () {
    return {
      test333: 'ddd'
    }
  },
 mounted () {
  //这里改变一下this指向，下面就可以调用外面的参数方法等
  var _this=this
  // 创建构造器
  var Profile = Vue.extend({
    template: "<p><span style='font-family: 微软雅黑;'>点击这里进行查看</span> <a href='javascript:void(0)' @click='lookDetails(\"参数一\",\"参数二\")'>查看详情</a></p>",
    methods: {
      lookDetails (a, b) {
        console.log('成功',a, b,_this.test333)
      }
    }
  })
  // 创建 Profile 实例，并挂载到一个元素上。
  new Profile().$mount('#parent')
  }
}

page display

console print after click

 

 

 3. Problems encountered

1. The method bound to the a tag returned by the interface at the beginning is not wrapped in quotation marks, and the a tag cannot be rendered
2. Also pay attention to the use of single and double quotes. After the method is wrapped in double quotes, the parameters in the method must use single quotes
3. At the beginning, the onclick was used for the a tag event returned by the interface, and then the error method was undefined, and then it was changed to @click.
4. This method needs to be executed after the parent element to be bound is mounted, otherwise an error will be reported and cannot be found

---