[Vuejs]-How to append a component on button click

by

0👍

✅

I believe you do something like this: Inserting in DOM.

  1. Use a $ref instead of an ID
  2. Create a new element and $mount it
  3. Get the $ref of the parent and append the DOM element that way
const EquipmentInput = Vue.extend({
  template: "<div>Hello World</div>"
});

const app = new Vue({
  el: "#app",
  components: {
    EquipmentInput
  },
  methods: {
    add() {
      const instance = new EquipmentInput();
      instance.$mount();
      this.$refs.ediv.appendChild(instance.$el);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div ref="ediv"></div>
  <button @click="add">Click Me</button>
</div>

Leave a comment