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:
- You need to add proper object in the array in
addRow
method - You can use
splice
method to remove an element from an array at particular index. - 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
How to Call Make Angular Service Synchronous
Save Embedded Pdf from Website
How to Print Star Pattern in JavaScript in a Very Simple Manner
Cannot Access Json Object Property Returns Undefined
Detect If a Field Is Updated With JavaScript or Jquery
Stylesheet Not Loading Because Mime Type Is Text/Html
Node.Js Call Function If Button Clicked
Close Window Automatically After Printing Dialog Closes
Observe Localstorage Changes in Js
How to Access Session Variables and Set Them in JavaScript
How to Detect Browser Back Button Click Event Using Angular
React Js Error: Is Not Defined React/Jsx-No-Undef
Regex Pattern to Match At Least 1 Number and 1 Character in a String
How to Add Class on Specific Div When Scroll
Trigger Event When Element Becomes Visible With Ngif
How to Open a Url Link from JavaScript Inside a Google Apps Script HTML Google Site Gadget
How to Extract the User Name from an Email Address Using JavaScript