时间戳

首页 > 解决方案 > 如何从Vue中动态添加的元素调用方法

vue.js - 如何从Vue中动态添加的元素调用方法

问题描述

在 Vue 中是否可以在 DOM 中插入一个新元素并从中调用一个方法，如下所示？以下不起作用“什么都没有发生”。

Popup() {
      const confirm = `
          <div>
            <div>Are you sure?</div>
            <div>
              <button @click="cancel" >CANCEL</button>
              <button @click="delete" >DELETE</button>
            </div>
          </div>
      `

      let div = document.createElement('div')
      div.innerHTML = confirm
      document.body.append(div)
},
delete() {
    console.log('deleted')
}

如果不是在 Vue 中完成类似事情的方法是什么？

标签： vue.js

解决方案

不，我们不会在 VueJS 中这样做。对于这种情况，我会使用 v-if / v-show 来实现这一点。

<div v-if="isConfirm">
    <div>Are you sure?</div>
    <div>
      <button @click="cancel" >CANCEL</button>
      <button @click="delete" >DELETE</button>
    </div>
</div>

稍后在您的数据中

data(){
    return {
        isConfirm: false
    }
},
method:{
    Popup(){
        this.isConfirm = true;
    }
}

推荐阅读