[Vuejs]-Vue.js : Append an existing div element to another or get existing html content in data

by

0👍

You can create a component and nest it inside another one using slots

here is an example :

Vue.config.productionTip = false


Vue.component('test1',{
 template : '<div class="test1">' +
              'some content inside test 1' +
               '<slot></slot>' +
            '</div>'
})

Vue.component('test2',{
 template : '<div class="test2">text text text etc.</div>'
})


new Vue({
 el :'#app',
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<test1>
    <test2></test2>
</test1>
</div>

0👍

I will make that div element into a component,
and put it below where you need to show it (in multiple places).
Then use a variable to control the display (v-show / v-if).
You better not trying to manipulate the DOM with Vue.

0👍

@andypotato, yes you are right, I should not manipulate manually.
I decided to use that appendTo as jQuery in mount() & continue other things with Vue.js.

Thanks everyone for the help.

Leave a comment