Vue.Js Add Objects to Existing Array

How to add object to object array (Vue.js)

[1] Either you can change the way you are inserting item to the object

new Vue({  el: '#app',    data: {    ESBegriffe: {                          0:{"id":0,"typ": 1,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},                          1:{"id":1,"typ": 1,"Kategorie": 2,"Begriff":"foo","Reihenfolge":1},                          2:{"id":2,"typ": 2,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},                          3:{"id":3,"typ": 2,"Kategorie": 2,"Begriff":"foo","Reihenfolge":0},                          4:{"id":4,"typ": 2,"Kategorie": 1,"Begriff":"foo","Reihenfolge":1},    }  },    methods: {    addBegriff: function(){        var object = {"id": 5,"typ": 2,"Kategorie": 1,"Begriff": "BegriffK12","Reihenfolge":1};                // Push is an array prototype constructor, you can not use it with `ESBegriffe` which is an object         this.$set(this.ESBegriffe, 5, object);     },  }})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- // TO VIEW OBJECT CONTENT --> <div v-for="(row, i) in ESBegriffe" :key="i" > {{ row }} </div>
<!-- YOUR BTN --> <i @click="addBegriff"> Add(+) </i>
</div>

Vue.js add objects to existing array

Try :

vm.results =  vm.results.concat(response.data.data);

This will append the array "response.data.data" to the "results" array.

How to push object to existing array in Vue.js

I would suggest using v-model on the select to detect which is currently selected.

<div id="app">
<select @change="onChange" class="form-control" v-model="selected">
<option value="" selected disabled>Choose</option>
<option v-for='item,key in items' :value="item">@{{ item.name }}
</option>
</select>
<p v-for="newItem in newItems">
{{newItem}}
</p>
</div>

and then push this.selected in your onChange method instead:

this.newItems.push(this.selected)

Hope this helps.

Working fiddle of your code with some small modifications:

https://jsfiddle.net/MapletoneMartin/e4oth98p/7/

Vuejs add new values to existing array

you can use the spread syntax (...):

const post = this.Fitness_Posts[0];
post.postComments = [...post.postComments, newComment];

it basically spreads all of your current postComments into a new array which also includes newComment and replacing the postComments array with the new one

How to add and remove item from array in components in Vue 2

There are few mistakes you are doing:

  1. You need to add proper object in the array in addRow method
  2. You can use splice method to remove an element from an array at particular index.
  3. You need to pass the current row as prop to my-item component, where this can be modified.

You can see working code here.

addRow(){
this.rows.push({description: '', unitprice: '' , code: ''}); // what to push unto the rows array?
},
removeRow(index){
this. itemList.splice(index, 1)
}

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

The push() method ought to add purchase objects to the queue array, but as @FK82 pointed out in his comment, push() is adding multiple references to the same purchase object. This means that if you change the object by increasing the quantity, every purchase's quantity property will be updated.

You can give that a try here:

const exampleComponent = Vue.component("example-component", {  name: "exampleComponent",  template: "#example-component",  data() {    return {      queue: [],      purchase: {        product: null,        customer: null,        quantity: null      }    };  },  methods: {    queuePurchase() {      this.queue.push( this.purchase );    }  }});
const page = new Vue({ name: "page", el: ".page", components: { "example-component": exampleComponent }});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script><template id="example-component">  <div>    <p>The Queue has {{ this.queue.length }} items.</p>    <input      v-model="purchase.quantity"      type="number"      min="1"      name="product"      placeholder="Quantity"    >    <button @click="queuePurchase">      Add to Queue    </button>    <pre>{{ JSON.stringify(this.queue, null, 2) }}</pre>  </div></template>
<div class="page"> <example-component></example-component></div>


Related Topics



Leave a reply



Submit