如何在 Vue.JS 中将现有组件添加到模板 onclick？

Question

I want to be able to add a component to my template by clicking on a button. Let me show you what I have: Draggable.vue is the component that I would like to add when I click on a button.

<template>
  <div ref="draggableContainer" id="draggable-container" @mousedown="dragMouseDown">
    <div id="draggable-header" >
      <slot name="header"></slot>
    </div>
    <slot name="main"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'DraggableDiv',
  data: function () {
    return {
      positions: {
        clientX: undefined,
        clientY: undefined,
        movementX: 0,
        movementY: 0
      }
    }
  },
  methods: {
    dragMouseDown: function (event) {
      event.preventDefault()
      // get the mouse cursor position at startup:
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      document.onmousemove = this.elementDrag
      document.onmouseup = this.closeDragElement
    },
    elementDrag: function (event) {
      event.preventDefault()
      this.positions.movementX = this.positions.clientX - event.clientX
      this.positions.movementY = this.positions.clientY - event.clientY
      this.positions.clientX = event.clientX
      this.positions.clientY = event.clientY
      // set the element's new position:
      this.$refs.draggableContainer.style.top = (this.$refs.draggableContainer.offsetTop - this.positions.movementY) + 'px'
      this.$refs.draggableContainer.style.left = (this.$refs.draggableContainer.offsetLeft - this.positions.movementX) + 'px'
    },
    closeDragElement () {
      document.onmouseup = null
      document.onmousemove = null
    }
  }
}
</script>

<style>
#draggable-container {
  position: absolute;
  z-index: 9;
  height: 240px;
  width: 152px;
  background-color: rgb(170, 104, 43);
}
#draggable-header {
  z-index: 10;
}
</style>

And here is my App.vue:

<template>
<div id = 'dd'>
  <button @click="createDraggableDiv">Créer bloc</button>
  <DraggableDiv class="col-11">
    <template>

    </template>
  </DraggableDiv>
</div>


</template>

<script>
import DraggableDiv from './components/DraggableDiv.vue'


export default {
  name: 'App',
  components: {
    DraggableDiv,
  },
  methods:{
    createDraggableDiv(){
       //function to add the DraggableDiv component to my template
    }
  }

}
</script>

<style>


</style>

I already have a DraggableDiv on my app when I launch it but I want to be able to add some more with the button.

I you have any idea to help me do that, please tell me! Thanks!

Answer 1

You can achieve this using the v-for directive:

<template>
  <div>
    <your-component v-for="index in count" :key="index"></p>
    <button v-on:click="addComponent">Add</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 1
      };
    },
    methods: {
      addComponent() {
        this.count += 1;
      }
    }
  };
</script>