Vue.js動態添加和刪除

我正在學習Vue.js爲我的遊戲，我想知道是否有一種方法來動態地添加和刪除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組件到Vue的？

來源

2017-06-17 JeePing

你的代碼講得不可能實現。但如果你能進一步解釋你的業務需求，我相信有一個出路。 – Charith

@ charith我有一個遊戲，你有多個項目，如警報框，庫存，設置等...他們是可拖動的，可以關閉。我需要能夠動態刪除它們並添加它們 – JeePing

你確定你不只是想[條件渲染]（https://vuejs.org/v2/guide/conditional.html）？ – Bert

您需要一個地方將vm放在模板中。然後，您可以手動將組件$mount添加到含有vm.$mount('el')的元素。您也可以使用vm.$destroy(true)刪除元素。銷燬不會從DOM中刪除元素。你需要的是手工做的東西，如(vm.$el).remove()

我不是100％，這是你要找的東西，當你發現自己手動調用$destroy()你可能沒有做正確的事情......但它確實讓你控制組件的創建和銷燬。

像這樣的事情會讓你創建，然後摧毀你的組件（注意在這種情況下，一旦你摧毀虛擬機就不見了）：

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

來源

2017-06-18 08:01:14

聲音OK ...除非你點擊Make＆Destroy後出現錯誤，然後製作https://jsfiddle.net/2pkesc47/ http://prntscr.com/fl7itn – JeePing

這就是爲什麼我寫'（注意這種情況下，一旦你摧毀虛擬機已經沒了）'。如果你想再次添加它，你需要編寫代碼來再次創建新組件。我把它留下了，所以會看到摧毀確實會破壞你的組件。 –

Vue.js動態添加和刪除

回答

相關問題