我想从 javascript create element with DOM on vue.js(nuxt.js) 获取事件@click

Question

HTML

<button @click="createEle()" id="btn1">click</button>

视图

methods: {
   createEle() {
      let aEle = document.createElement("a")
      aEle.classList.add("btn2")
      aEle.innerHTML = "Button 2";
      document.body.appendChild(aEle)
   },
   getBtn2() {
      console.log(document.querySelector('.btn2').innderHTML)
   }
}

单击按钮后生成我的代码 #btn1

<button id="btn1">click</button>
<a class="btn2">Button 2</a>

但是如何为调用函数 getBtn2() 创建 @click 插入到 .btn2

Answer 1

在模板中：

   <button @click="createEle()" id="btn1">click</button>
   <a v-for="link in links" :href="link.href" class="btn2">{{link.text}}</a>

在脚本中：

    data(){
      return {
          links: [],
      }
    },
    methods:{
      createEle() {
        let newLink = { href: "https://www.google.com/", text: "Google" } ;
        this.links.push(newLink);
      },
      getBtn2() {
         this.links.forEach(el => console.log(el.text) );
      }
    }