[Vuejs]-Vue JS – How to dynamically create tables

by

0👍

The best way to add these tables to your HTML is by using a creating a separate table-component.
And then add these table-components dynamically by using a v-for attribute in your table-component tag.

Then you could create an array containing any necessary properties for your table-component. The v-for could then loop over this array and create a new component for every item in the array. Let me clarify this with an example:

const ListItem = {
  props: [
    'text'
  ],
  template: "<div> {{ text }} </div>",
}

const vm = new Vue({
  el: '#vue-instance',

  components: {
    listitem: ListItem
  },
  data: {
    elements: []
  },
  methods: {
    addElement: function() {
      this.elements.push("This is a new instance")
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vue-instance">
  <button @click="addElement">
     Add an element
   </button>

  <listitem v-for="(element, index) in elements" :text="element" :key="index">
  </listitem>
</div>
👤Ignace Vau

Leave a comment