如何将 Vue 组件添加为 HTML 标签

Question

我是使用 VueJS 的新手，我现在正在做一个学习项目。 我有一个名为“Draggable”的组件，还有一个名为“ModalPage”的组件。 “模态页面”如下：

该页面的代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="propagate">Propagate</button>
    <h3>Vue Modals</h3>
    <ul id="list">

    </ul>
    <!-- <div v-html="template"></div> -->
  </div>
</template>

<script>
import draggable from '@/components/Draggable.vue';

export default {
    name: 'ModelPage',
    components: {
        draggable,
    },
    data () {
        return {
            msg: 'Welcome to the Modal Popup Page',
            template: `<draggable></draggale>`,
        }
    },
    methods: {
        propagate () {
            // console.log("propagated")
            list.append(`<draggable></draggale>`)
        }
    }
}
</script>

我还有一个叫“Draggable”的组件，代码如下：

<template>
    <div id="app">
        <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
            <h3>Hello World!</h3>
            <p>{{ top }} х {{ left }} </p>
            <p>{{ width }} х {{ height }}</p>
        </VueDragResize>
    </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize';

export default {
    name: 'app',
        components: {
            VueDragResize
        },
        data() {
            return {
                width: 0,
                height: 0,
                top: 0,
                left: 0
            }
        },
        methods: {
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            }
        }
    }
</script>

我要做的是能够点击页面上的“传播”按钮，并在页面上附加一个<draggable></draggable> html元素，如下：

<ul id="list">
    <draggable></draggable> 
</ul>

我完全被这个难住了。谁能帮帮我？

Answer 1

v-if 会做你的工作

更新 您可以使用 v-for 作为讨论：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="propagate">Propagate</button>
    <h3>Vue Modals</h3>
    <ul id="list">
       <draggable v-for="index in count" :key="index>
       </draggable> 
    </ul>
    <!-- <div v-html="template"></div> -->
  </div>
</template>

<script>
import draggable from '@/components/Draggable.vue';

export default {
    name: 'ModelPage',
    components: {
        draggable,
    },
    data () {
        return {
            msg: 'Welcome to the Modal Popup Page',
            template: `<draggable></draggale>`,
            count: 0
        }
    },
    methods: {
        propagate () {
            // console.log("propagated")
            this.count++
        }
    }
}
</script>