vue中如何点击按钮动态添加多个div，并给这些div附加上双击事件或者鼠标右击事件

Question

问题出现的环境背景及自己尝试过哪些方法

下面是我自己用js生成的div.请问下用vue的方法如何用

相关代码

<div class="resize-container" ref="resize" id="resize" v-html="items">
</div>
addDiv(){
    this.floorNumber ++;
    var div = document.createElement("div");
    div.id ="div"+this.floorNumber;
    div.setAttribute("class", "resize-drag");
    div.style.cssText="width:80px;height:50px;border:1px solid #000;";
            // this.$refs.resize.appendChild(div);
            // div.ondblclick = this.objclick();
},

你期待的结果是什么？实际看到的错误信息又是什么？

希望可以添加div，并附加事件，用v-html后事件不可以触发

Answer 1

用v-for循环，点击按钮的时候，往数组里面添加一个元素

<div v-for="(item,index) in arr" :id="`dev${index}`" class="resize-drag" @click="objclick"></div>

Answer 2

可以试试另一种方法，隐式创建Vue实例，比较适合封装成函数进行调用

<div id="app1"></div>

要挂载在到#app1的根实例：

new Vue({
    el: '#app1',
    template: `
    <div>
        <button @click="add">创建一个div</button>
    </div>`,
    methods: {
        add() {
            addMyCom();
        },
    }
});

创建一个扩展，也可以直接注册一个组件：

const myCom = Vue.extend({
    render(h) {
        return h('div', {
            style: {
                border: '1px solid black',
                margin: '10px'
            },
        }, '被创建的div，单击会被删除');
    },
    destroyed() {
        console.log('destroyed my-com');
    }
});

函数addMyCom，向DOM中添加一个div，然后创建一个vue实例，并将其挂载到div上：

function addMyCom() {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const tar = new Vue({
        el: div,
        template: `
        <div>
            <my-com @click.native="destroy" />
        </div>`,
        components: {
            myCom,
        },
        methods: {
            destroy() {
                this.$destroy();
                document.body.removeChild(this.$el);
            },
        },
        destroyed() {
            console.log('destroyed');
        }
    });
    return tar;
}

写法有很多种，不止上面的方式，你也可以把需要动态插入的div封装成独立的模块，再以函数addMyCom的方式动态的嵌入到html中

Answer 3

楼上的说的对的 我已经试过了 点击事件就加在你得按钮上就可以啦