How to push object to existing array in Vue.js

Question

In the below code I have a value and that is an object how to can I push to the exist array.

methods: {
  onChange(event) {
    this.newItems.push(event.target.value);
    console.log(event.target.value);
  }
}

and my blade is:

<select @change='onChange($event)' class="form-control">
  <option value="" selected disabled>Choose</option>
  <option v-for='item,key in items' :value="item">@{{ item.name }}</option>
</select>

Make sure you already decalred 'var this.newItems = [];', before pushing new object to array — Sarvesh Mahajan
– Sarvesh Mahajan, Commented Dec 9, 2019 at 10:51
"newItems" => array:1 [ 0 => "[object Object]" ]. my object is wrong saved in array — Sayed Sajad Hosseini
– Sayed Sajad Hosseini, Commented Dec 9, 2019 at 10:58
So you got this? Also, you v-for is for items while in the code you refer to this.newItems, is it on purpose? — Mosh Feu
– Mosh Feu, Commented Dec 9, 2019 at 10:59

MartinSRimsbo · Accepted Answer · 2019-12-09 14:54:07Z

1

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/

edited Dec 9, 2019 at 14:54

answered Dec 9, 2019 at 12:05

MartinSRimsbo

2262 silver badges4 bronze badges

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

Collectives™ on Stack Overflow

How to push object to existing array in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related