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

Question

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?

@Christian Carrillo: Then I guess I better describe it as, a "collection of objects" (will update the question). — Dominic
– Dominic, Commented Mar 20, 2020 at 13:26

Shivam Singh · Accepted Answer · 2020-03-20 13:33:34Z

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

@Dominic most welcome, thanks for accepting, pls upvote too if you found it helpful, this will help other users identify the right solution with ease.

Christian Carrillo · Accepted Answer · 2020-03-20 13:35:43Z

0

just merge the new object, replace:

this.ESBegriffe.push(object);

for

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

answered Mar 20, 2020 at 13:35

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Comments

cheppanu · Accepted Answer · 2020-03-23 11:33:09Z

0

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.

edited Mar 23, 2020 at 11:33

answered Mar 20, 2020 at 13:23

cheppanu

11 gold badge1 silver badge3 bronze badges

2 Comments

Steven B. Over a year ago

Array items cannot be key:value pairs.

cheppanu Over a year ago

Yes, typoo. I just want tell them about making it array instead of object.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related