Как добавить компонент Vue в виде HTML-тега - PullRequest
Новая
       20

Как добавить компонент Vue в виде HTML-тега

0 голосов
/ 05 июня 2018

Я новичок в использовании VueJS и сейчас работаю над учебным проектом.У меня есть компонент под названием «Draggable», а другой компонент называется «ModalPage».«ModalPage» выглядит следующим образом:

enter image description here

Код для этой страницы ниже: 

<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>

У меня также есть компонентназывается «перетаскиваемый» и его код выглядит следующим образом: 

<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>

Что я хочу сделать, так это иметь возможность щелкнуть кнопку «Распространение» на странице и добавить к элементу HTML1 <draggable></draggable> htmlстраница выглядит следующим образом: 

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

Я полностью озадачен этим.Может кто-нибудь помочь мне, пожалуйста?

1 Ответ

0 голосов
/ 05 июня 2018

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>
...