Vue.js dynamic追加と削除

Question

私は自分のゲームでVue.jsを学習していますが、Vue.jsのコンポーネントを動的に追加したり削除したりする方法があるのだろうか？ はここに私の現在のコード

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

*/ 

コードは、基本的にはそう自分のため

を話すだ、それは動的ヴューにVue.jsコンポーネントを追加および削除することも可能（とどのように？）でしょうか？

Answer 1

vmをテンプレートに入れる場所が必要です。次に、vm.$mount('el')の要素に手動で$mountコンポーネントを追加することができます。 vm.$destroy(true)で要素を削除することもできます。 DestroyはDOMから要素を削除しません。 (vm.$el).remove()

これはあなたが探しているものではありません。手動で$destroy()を呼び出すと、おそらく正しく動作していない可能性がありますが...コンポーネントの作成と破棄を制御できます。このような

何かがあなたが作成（あなたはそれがなくなってVM破壊したら、この場合にはノート）コンポーネントを破壊できるようになる：どのようなあなたのコードは、話すことは実装することはできません

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