如何動態地（以編程方式或動態）添加或刪除Vue.js組件

Question

這是我的代碼，這只是一個示例代碼，如果以下工作，那么這將幫助我構建我正在處理的其他東西。

<template>
  <div id="wrapper">
    <div id="divOne">
      <!-- Add or remove component here dynamically -->
    </div>
    <div id="divTwo">
      <!-- Add or remove component here dynamically -->
    </div>

    <!-- There will be more divs like #divOne #divTwo above -->

    <div>
      <input type="radio" id="one" value="divOne" v-model="pickedDiv">
      <label for="one">One</label>
    </div>
    <div>
      <input type="radio" id="two" value="divTwo" v-model="pickedDiv">
      <label for="two">Two</label>
    </div>

    <button @click="addComponent">Add Component</button>
  </div>
</template>

<script>
import SomeComponent from './SomeComponent'

export default {
  data() {
    return {
      pickedDiv: '',
      pickedDivPreviously: ''
      propItems: ['item1', 'item2']
    }
  }
  methods: {
    addComponent () {
      //-- This is not working code but I need something like this --//
      this.pickedDivPreviously = this.pickedDiv // event not sure how to get previously selected div

      const divThatIsPicked = document.getElementById(this.pickedDiv)
      const divThatWasPickedPreviously = document.getElementById(this.pickedDivPreviously)

      // code here to remove/empty/destroy old component from 'divThatWasPickedPreviously'
      divThatWasPickedPreviously.innerHTML = "" 

      // code here to add new component in 'divThatIsPicked'
      divThatIsPicked.appendChild('<some-component :someProp="propItems" @someEvent="someFn">')
    }
  }
}
</script>

我不想分散您對實際問題的回答，但如果您對我正在工作的內容感到好奇，那么請檢查一下 :)這里我想在單擊任何行項目時在行的末尾添加新的子DIV。

我會很樂意，如果這個轉換比上面提出的實際問題VUE，如說請不要誤會，從實際問題分心，如果你覺得很難:)

Answer 1

我在forum.vuejs.org得到了JamesThomson的幫助 ，雖然解決方案沒有解決我的問題，但我了解使用Vue.js的限制或可能性。

詹姆斯湯姆森說：

是的，你的示例代碼肯定不會起作用。 使用Vue時，您需要以面向數據的方式思考，而不是面向DOM（如jQuery）

取自您的SO帖子：

在這里，我嘗試在單擊任何行項目時在行的末尾添加新的子DIV。

我認為這是本主題的最終目標。 一個簡單的例子可以這樣實現： https ： //codepen.io/getreworked/pen/XZOgbm？editors = 1010

 let Welcome = { template: ` <p @click="toggleMsg()">Welcome {{ msg }}!</p> `, data () { return { msg: 'home' } }, methods: { toggleMsg () { return this.msg = this.msg === 'home' ? 'back' : 'home'; } } } const App = new Vue({ el: '#app', data: { children: [ Welcome ] }, methods: { add () { this.children.push(Welcome); }, } }); 

 <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <div id="app"> <template v-for="(child, index) in children"> <component :is="child" :key="child.name"></component> </template> <button @click="add()">Add Another</button> </div> 

或者您可以使用渲染功能獲得更大的靈活性https://jsfiddle.net/jamesbrndwgn/ku7m1dp0/9/

 const Reusable = { template: '<div>{{ name }} {{ bar }}</div>', props: { name: { type: String } }, data () { return { bar: 'Bar' } } } const App = new Vue({ el: '#app', data: { items: [] }, methods: { addComponent () { const renderComponent = { render (h) { return h(Reusable, { class: ['foo'], props: { name: 'Foo' } }) } } this.items.push(renderComponent) } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"> <div id="app"> <component v-for="item in items" ref="itemRefs" :is="item" :key="item.name"></component> <button @click="addComponent">Add Component</button> </div> 

我找到了其他一種與上面相同的方法，但只使用舊的vue.js-1而不是vue.js-2：

 var createNewBox = function() { var MyPartial = Vue.extend({}); window.partial = new MyPartial({ template: '#partial', data: function() { return { txt: 'This is partial' } }, methods: { print: function() { console.log('this.txt : ' + this.txt) console.log('main.txt : ' + main.txt) }, }, }) window.partial.$mount().$appendTo('body') } window.main = new Vue({ el: '#main', data: function() { return { txt: 'This is main' } }, methods: { show: function() { createNewBox() } }, }) 

 <script src="https://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script> <div @click="show" style="width:200px;height:200px;background:#000" id="main"> <template id="partial"> <div style="width:100px;height:100px;background:#ff0" @click.stop="print"></div> </template> </div> 

Answer 2

這轉換為Vue。

https://codepen.io/jacobgoh101/pen/Kojpve

<div id="app">
  <div class="parent">
    <div class="child" @click="handleChildClick" data-new-child-id="1">1234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="2">12341234 </div>

    <div class="child" @click="handleChildClick" data-new-child-id="3">123412341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="4">1234</div>

    <div class="new-child" v-if="[1,2,3,4].indexOf(showNewChild) > -1">boom</div>

    <div class="child" @click="handleChildClick" data-new-child-id="5">12341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="6">123412341234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="7">1234</div>

    <div class="child" @click="handleChildClick" data-new-child-id="8">12341234</div>

    <div class="new-child" v-if="[5,6,7,8].indexOf(showNewChild) > -1">boom</div>

    <div class="child" @click="handleChildClick" data-new-child-id="9">123412341234</div>

    <div class="new-child" v-if="[9].indexOf(showNewChild) > -1">boom</div>
  </div>
</div>

使用Javascript

new Vue({
  el: '#app',
  data: {
    showNewChild:null
  },
  methods: {
    handleChildClick(e) {
      let id = e.target.dataset.newChildId;
      id = Number(id);
      this.showNewChild = id;
    }
  }
})