[Vuejs]-Can I push objects into Vue component data? Wanting to make a table after js filtering/manipulation

by

0👍

Pushing data into a vue component is not a good practice. You would have a lot easier time if you use Vuex for what you’re trying to do. Then you could build a closed-loop data system that updates state data in Vuex with mutations and returns the update to component with a getter. Doing all of this within component is possible if you initialize your data property correctly, though.

To actually answer your question, though, you would do it like this:

 data () {
       return {
          myData: [],
          someDataObject: null
       }
    }
...
methods: {
   fillData () {
      this.myData.push(this.someDataObject);
   }
}

And in template:

...
<div v-for(item in myData, index) :key:item item:item>
   <input type:'text' v-model="someDataObject">
   <button @click="fillData();"></button>
   <p>{{myData[0]}}</p>
</div>
...

Leave a comment