Question

我是使用VueJS的新手，我现在正在开展一个学习项目。我有一个名为“Draggable”的组件，另一个名为“ModalPage”。 “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>

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

1 个答案: