How to add data into the table in vue.js?

Question

I want to add the data into table when I want to. However, I can not add the data after initializing the vue instances.

I have tried to use followings, but, still dose not update data.

・$nextTick ・$set

<script>
var overall = new Vue({                                                                                                                                         
  el: '#overall',                                                                                                                                               
  data: {                                                                                                                                                       
      headers:[                                                                                                                                                 
        "no","name",'gender'                                                                                                                          
      ],                                                                                                                                                        
      items: []                                                                                                                                                 
  },                                                                                                                                                              methods: {                                                                                                                                                    
    add: function(item)                                                                                                                                         
    {                                                                                                                                                           
      this.items = item;
    }
  }
});

overall.add([{no:'1',name:'Tom Tom',gender:'male'}]);
</script>

<div id="overall">
  <table>
    <thead>      <tr>
        <th  v-for="header in headers">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody >
      <tr v-if="items.length === 0">                                                                                                                                    <td>No data</td>                                                                                                                                        </tr>                                                                                                                                                           <tr v-else v-for="item in items">                                                                                                                         

        <td>{{item.no}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
</div>

your add function is assigning an item to this.items, i dont know what youre doing here. — Flame
– Flame, Commented Jun 5, 2019 at 10:38
this.items = item; should rather be this.items.push(item); — Stephen S
– Stephen S, Commented Jun 5, 2019 at 10:45
Multiple problems with the code: 1) add needs to push, 2) tbody tr needs a v-for, 3) add should be defined in Vue app's methods object, 4) add should be called in created lifecycle hook, not outside the app — Dan
– Dan, Commented Jun 5, 2019 at 10:47

Ashish Kumar · Accepted Answer · 2019-06-08 13:17:32Z

The issue is you are not updating the Array but completely replacing it with new one everytime you are using the add method.

add: function(item) {                                                                                                                                                           
      this.items.push(item); //change this line to push item to array instead of replacing it everytime.
    }

Another part which you need to fix is, instead of passing an array of items in add method, pass just the item you want to add.

overall.add({no:'1',name:'Tom Tom',gender:'male'}); // remove the array brackets from here

Below is running example: https://jsfiddle.net/52d96oxj/

var overall = new Vue({
  el: '#overall',
  data: {
    headers: [
      "no", "name", 'gender'
    ],
    items: []
  },
  methods: {
    add: function(item) {
      this.items.push(item); // push item to existing array
    }
  }
});

// Add objects, not array to the list
overall.add({ no: '1', name: 'Tom Tom', gender: 'male'});
overall.add({ no: '2', name: 'John Doe', gender: 'male'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="overall">
  <table>
    <thead>
      <tr>
        <th v-for="header in headers">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-if="items.length === 0">
        <td>No data</td>
      </tr>
      <tr v-else v-for="item in items">

        <td>{{item.no}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
</div>

Thank you very much for your help. This is very helpful for me.

tony19 · Accepted Answer · 2022-07-15 05:49:25Z

1

I think that before moving forward to the solution, you should know a couple of things:

data is a function, it should return the component values.

  data: function() {
    return {
        headers: ['Nº', 'Name', 'Gender'],
        items: [{}],
    }
  },

When working with arrays, there is a method to append an object to it. This method is called "push", and you should use in the following way:

  methods: {
    add: function(item) {
        this.items.push(item);
    }
  },

When working with Vue Instance, there is one recommendation: Don't use outside its scope. You CAN use it, but you SHOULD NOT. It's a better solution to load array elements on the created or mounted events, you can read more about it on VueJS site. https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

About the solution, I have combined what I told you, and it's working. I added the :key property to v-for elements, but the major change is on the JavaScript code:

var app = new Vue({
    el: "#app",
  data: function() {
    return {
        headers: ['Nº', 'Name', 'Gender'],
      items: [{}],
    }
  },
  methods: {
    add: function(item) {
        this.items.push(item);
    }
  },
  mounted: function() {
    this.add({no:'1',name:'Tom Tom',gender:'male'});
    this.add({no:'2',name:'Marcos Huck',gender:'male'});
  },
  
});

edited Jul 15, 2022 at 5:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 5, 2019 at 10:53

Marcos Huck

113 bronze badges

4 Comments

Leo S Over a year ago

Thanks for your comments. Then, I have another question. If we have another vue instance and I want call from that instance, what should we do?

Leo S Over a year ago

Or, vue instance should not communicate with other instance?

Marcos Huck Over a year ago

No problem Leo! Your solution should use another approach for that kind of problem, avoid the usage of Vue Instances, and keep in mind that your app is a wrapper of components. vuejs.org/v2/guide/components-registration.html#ad

Leo S Over a year ago

Thanks Marcos. This is very helpful for me. So, I have to use components in my case as you told me. I will try it out today :)

Collectives™ on Stack Overflow

How to add data into the table in vue.js?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related