Adding items to end of array dynamically

Question

New to Vuejs, have a question on updating an array.

This is my data (status_arr):

{
    "Approvals": [
        {
            "name": "Section 1",
            "count": 10692
        }
    ],
    "Declines": [
        {
            "name": "Section 1",
            "count": 1212
        },
        {
            "name": "Section 2",
            "count": 5
        }
    ]
}

I need to add a "Pending" part of the above data dynamically. I'm not quite understanding the $set method on how to accomplish this. I need to add to the above dataset without effecting the rest of the data in it.

The documentation says to use:

this.$set(status_arr, itemIndex, [ { 'name': 'Section 1', 'count': 0 } ]);

Not sure how to add the Pending part with the data attached and if I'm adding to the array, how does it have an itemIndex for me to do so? Is there a this.$add function or something that works like a pop()?

Thanks for any help!

What should the status_arr object look like after adding the Pending part? — Phil
– Phil, Commented Sep 26, 2017 at 0:10

Phil · Accepted Answer · 2017-09-26 00:11:47Z

2

If I'm understanding your question correctly, you want

this.$set(this.status_arr, 'Pending', [{
  name: 'Section 1',
  count: 0
}])

answered Sep 26, 2017 at 0:11

Phil

166k25 gold badges265 silver badges269 bronze badges

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

2 Comments

Sean Over a year ago

This is exactly what I wanted. Thanks!

Phil Over a year ago

@Sean you're welcome. See the other answer for an alternative that is less likely to trigger errors if you try to access status_arr.Pending before you've populated it

Quoc-Anh Nguyen · Accepted Answer · 2017-09-26 00:43:22Z

1

You can change status_array to this:

{
    "Approvals": [
        {
            "name": "Section 1",
            "count": 10692
        }
    ],
    "Declines": [
        {
            "name": "Section 1",
            "count": 1212
        },
        {
            "name": "Section 2",
            "count": 5
        }
    ],
    "Pending": []
}

And when you want to add more item to Pending, you can use:

status_array.Pending.push(newEle)

Remember, Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

answered Sep 26, 2017 at 0:43

Quoc-Anh Nguyen

5,0961 gold badge25 silver badges34 bronze badges

Comments

Kumar_14 · Accepted Answer · 2017-09-26 06:16:13Z

0

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set or this.$set. This is how I achieve it:
A constructor function to return desirable object

 addObj(name, count) {
     return {
         name: name,
         count: count
     }
 }

Call this function

var newObj = new this.addObj('tom', 6);
this.$set(this.status_arr, 'Pending', newObj);

And if you want to remove a key val pair:

this.$delete(this.status_arr, 'Pending');

answered Sep 26, 2017 at 6:16

Kumar_14

5843 silver badges15 bronze badges

Collectives™ on Stack Overflow

Adding items to end of array dynamically

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related