Vue.js dynamic add and remove

Question

I'm learning Vue.js for my game and I was wondering if there is a way to dynamically add and remove components in Vue.js ? Here's my current code

var vue = new Vue({
    el: "#fui",
    template: ``
})

const HelloCtor = Vue.extend({
  props: ['text'],
  template: '<div class="hello">{{ text }}</div>',
});

const vm = new HelloCtor({
  data: {
    text: 'HI :)'
  }
});

/*
How can I do something like this?

vue.add(vm);
vue.remove(vm);

*/

The code basically speaks for himself

So, is it possible (and how?) to dynamically add and remove Vue.js components to a Vue?

What your code speaks is not possible to implement. But if you can explain further the business requirement of yours , I am sure there is a way out. — CuriousGuy
– CuriousGuy, Commented Jun 17, 2017 at 18:42
@charith I have a game where you have multiple items like alert boxes, inventory, settings ect... They are draggable & can be closed. I need to be able to dynamically remove them and add them — JeePing
– JeePing, Commented Jun 17, 2017 at 18:46
@BertEvans Well, for alerts for example I want to completly remove the component from memory / DOM when it's closed — JeePing
– JeePing, Commented Jun 17, 2017 at 18:52
@JeePing Vue is a data driven framework where what's displayed is a reflection of state. Your approach is imperative. If you want to do it your way you will be fighting the framework. — Bert
– Bert, Commented Jun 17, 2017 at 19:03

Mark · Accepted Answer · 2017-06-18 08:01:14Z

1

You need a place to put vm in the template. Then you can $mount the component manually to an element with vm.$mount('el'). You can also delete the element with vm.$destroy(true). Destroy won't delete the element from the DOM. You'll need to do that manually with something like (vm.$el).remove()

I'm not 100% this is what you're looking for, and when you find yourself manually calling $destroy() you are probably not doing things right…but it does let you take control of the creating and destruction of components.

Something like this will let you create then destroy your component (note in this case once you destroy vm it's gone):

<div id="fui">
    <button @click="make">Make</button>
    <button  @click="bye">destroy</button>
    <div id="mountme"></div>
</div>

<script>

    const HelloCtor = Vue.extend({
        props: ['text'],
        template: '<div class="hello">This has been {{ text }}</div>',

    })

    const vm = new HelloCtor ({
        data: {
            text: "Mounted"
        }
    })

    var vue = new Vue({
        el: "#fui",
        template: ``,
        methods: {
            make: () => {
                vm.$mount('#mountme')
            },
            bye: () => {
                vm.$destroy(true); 
                (vm.$el).remove();}
            }

        })


</script>

answered Jun 18, 2017 at 8:01

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JeePing Over a year ago

Sounds OK... Unless the fact that you get an error after clicking Make & Destroy and then Make jsfiddle.net/2pkesc47 prntscr.com/fl7itn

Mark Over a year ago

That's why I wrote '(note in this case once you destroy vm it's gone)'. If you want to add it again you need to write code that creates the new component again. I left it out so would would see that destroy does in fact destroy your component.

Collectives™ on Stack Overflow

Vue.js dynamic add and remove

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related