Adding data to a Vue.js Component

Question

Hello everyone I'm getting a handle on Vue.js and I've created a component for a table (called setupTable). I want to be able to dynamically add data to this. I know that Vue.js listens to push on data elements but I can't seem to access the data element of my component through setupTableComponent.data. How would I access and append data to this component?

var setupTableComponent = Vue.extend({
  template: '<table id="data-table">'+
              '<tr v-for="item in items">'+
                '<td>{{item.b}}</td>' +
                '<td>{{item.d}}</td>' +
                '<td>{{item.t}}</td>' +
              '</tr>' +
            '</table>',
  data: function(){
    return { items: [
      { t: "Tester", b: "Buster", d: "Duster"},
      { t: "Not a Tester", b: "Not a Buster", d: "Not a Duster"}
    ]};
  }
});

Vue.component('setup-table-component', setupTableComponent);

var setUpDataTableV = new Vue({
  el: '#sidebar',
  ready: function() {
  }
});

pespantelis · Accepted Answer · 2016-02-03 00:15:05Z

1

You could use the v-ref to access directly the child component:

<div id="sidebar">
  <button @click="onClick">Add item</button>
  <setup-table-component v-ref:table></setup-table-component>
</div>

Then, access the data of table ref like this:

this.$refs.table.$data.items.push(data)

https://jsfiddle.net/gjtf6sse/1/

answered Feb 3, 2016 at 0:15

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chris Maness Over a year ago

Is that really the best way to accomplish this?

David K. Hess Over a year ago

Two more options: 1) you could $broadcast an event on setUpDataTableV and catch it on setupTableComponent and 2) you could move items up to setUpDataTableV and pass a params reference to it down to setupTableComponent with two way binding.

Chris Maness Over a year ago

@DavidK.Hess I really like the idea of passing a params reference in order to keep the two way data binding. Is there any downside to this approach?

David K. Hess Over a year ago

Not aware of any - just a little more glue between components to setup and maintain.

Ali Raza · Accepted Answer · 2021-09-16 12:57:48Z

0

You can push data in existing array by using JavaScript push method.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

this.items.push(data)

answered Sep 16, 2021 at 12:57

Ali Raza

1,08314 silver badges20 bronze badges

Collectives™ on Stack Overflow

Adding data to a Vue.js Component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related