How do I push items with Index to the Vue Js 2 Object?

Question

All good day to you!

I am having trouble pushing items with an index to an object. I have a blank object just as below:

let data {};

I want to push items to the data object as follows:

// expected array
data = {
    1000: ['a', 'b'],
    1001: ['x', 'y']
};

To achieve that what I tried is:

this.$set(data, 1000, ['a', 'b']);
this.$set(data, 1001, ['x', 'y']);

I also tried out:

data[1000] = ['a', 'b'];
data[1001] = ['x', 'y'];

The real problem I am facing is I am getting lots of empty values within the array like this:

If I print that data object in the HTML then I get something like this:

[ null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, ...... ]

Since I have a large index value and I am getting a large number of empty values within an array which is slowing down the application and it takes a long time to render in HTML. Can someone help me out here to overcome this issue, please? Thank you in advance!

EricHier · Accepted Answer · 2021-01-21 11:39:58Z

2

An array cannot be used this way. You would have to create a object like that:

let data = {
    1000: ['a', 'b'],
    1001: ['x', 'y']
};

Afterwards, you can push a new element using your syntax:

data[1002] = ['a', 'b'];

answered Jan 21, 2021 at 11:39

EricHier

4653 silver badges10 bronze badges

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

5 Comments

Manohar Khadka Over a year ago

Hi, thanks for pointing me out about creating objects which I already tried out before but I am getting exactly the same issue. Lot's of empty items (null values) out there. And I have updated the question as well.

EricHier Over a year ago

Yeah exactly. The array will be initialized with 1000 null values for the first 1000 elements. This is the reason you wouldn't use an array for key-value pairs.

Manohar Khadka Over a year ago

So, what should I use here? Is there another way to do this?

EricHier Over a year ago

Why don't you do it the way I described it?

Manohar Khadka Over a year ago

The way you describe does not work as I already told you. It's not about using an array or object. The issue is something else here. Either you use an array or object you still get the same number of null values as Index. Maybe the issue is about ob: Observer object which I got in the console. And the issue is it takes a way longer time to render in HTML.

Collectives™ on Stack Overflow

How do I push items with Index to the Vue Js 2 Object?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related