CODEWITHSUNDEEP
vue.js
Dominic
Dominic

Reputation: 510

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

I've read 4 or 5 similar questions here, but can't get it to work: I have an array of objects called ESBegriffe

 data()
   return{
          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},
            }
    }

and a method addBegriff to add an object to this array: 

methods: {
  addBegriff: function(){
        var object = {5:{"id": 5,"typ": 2,"Kategorie": 1,"Begriff": "BegriffK12","Reihenfolge":1}};
        this.ESBegriffe.push(object);    
    },
}

activated by a button:

<i @click="addBegriff"> Add(+) </i>

but it doesn't work, on click I get the error

TypeError: "this.ESBegriffe.push is not a function"

What am I doing wrong here?

Upvotes: 0

Views: 5224

Answers (3)

cheppanu
cheppanu

Reputation: 1

make ESBegriffe as array

  ESBegriffe: [
                {"id":0,"typ": 1,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},
                {"id":1,"typ": 1,"Kategorie": 2,"Begriff":"foo","Reihenfolge":1},
                {"id":2,"typ": 2,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},
                {"id":3,"typ": 2,"Kategorie": 2,"Begriff":"foo","Reihenfolge":0},
                {"id":4,"typ": 2,"Kategorie": 1,"Begriff":"foo","Reihenfolge":1},
    ]

then it works.

Upvotes: 0

Christian Carrillo
Christian Carrillo

Reputation: 2761

just merge the new object, replace:

this.ESBegriffe.push(object);

for

this.ESBegriffe = { ...this.ESBegriffe, ...object }

Upvotes: 0

Shivam Singh
Shivam Singh

Reputation: 1731

[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>

[2] Or you can change the object to an array to make it work

new Vue({
  el: '#app',
  
  data: {
    ESBegriffe: [
                          {"id":0,"typ": 1,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},
                          {"id":1,"typ": 1,"Kategorie": 2,"Begriff":"foo","Reihenfolge":1},
                          {"id":2,"typ": 2,"Kategorie": 1,"Begriff":"foo","Reihenfolge":0},
                          {"id":3,"typ": 2,"Kategorie": 2,"Begriff":"foo","Reihenfolge":0},
                          {"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};
        this.ESBegriffe.push(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>

Upvotes: 1

Related Questions