Update object value in a loop getting the same value on all items using Vue

Question

I'm running in a loop which should update some values inside an object on vue environment.

I tried map, foreach & for loops but the specific property (e.g Id, or show) getting always the same values.

I took the same logic to jsfiddle (i put part of the same data there for playing) and it's worked there.

Here is the code:

var data = t.data.map((item) => {
        item.Status = Status.Draft;
          if (item.IsSent) {
            item.Status = Status.Sent;
          }
          return item;
        });

data.forEach((item) => {
     item.Buttons.forEach((b, index) => {
          const id = { Id: "button_" + item.ID + "_" + index };
          let show = { show: false };
          switch (b.action) {
              case ButtonActions.Duplicate:
              case ButtonActions.Delete:
              case ButtonActions.Preview: {
                show = { show: true };
                break;
              }
              case ButtonActions.Reports:
              case ButtonActions.Groups: {
                if (item.IsSent) {
                  show = { show: true };
                } else {
                  show = { show: false };
                }
                break;
              }
              case ButtonActions.Send:
              case ButtonActions.Schedule:
              case ButtonActions.Edit: {
                if (item.IsSent) {
                  show = { show: false };
                } else {
                  show = { show: true };
                }
                break;
              }
            }
            Object.assign(b, id);
            Object.assign(b, show);
     });
    //console.log(item.Buttons);
});

button.id getting always the same id for all the buttons. button.show can be true or false but always the same at all buttons no matter what loop i'm using, the console show the expected value, then after the loop, it is strange, the property is added but with the same values all over.

It looks like I found a Vue bug! :(

Can someone help with it?

Please post your data property so that more information could be obtained. Where is the ButtonActions object coming from? Is that a Typescript interface? — Tony
– Tony, Commented Jul 30, 2020 at 9:45
Hi, Thanks for your reply, you can see the it in the jsfiddle, as numbers. — Idoshin
– Idoshin, Commented Jul 30, 2020 at 9:58
I was actually referring to the data property in Vue. That is data() { return: {data }} — Tony
– Tony, Commented Jul 30, 2020 at 10:19

tony19 · Accepted Answer · 2022-07-16 00:51:46Z

1

In the vue documentation regarding Reactivity caveats for objects,

It states:

Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

So, in that vein, this should help

b = Object.assign({}, b, { id, show })

Alternatively, you can use

this.$set(b, 'show', show);
this.$set(b, 'id', id);

edited Jul 16, 2022 at 0:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 30, 2020 at 10:14

Tony

1,4423 gold badges11 silver badges22 bronze badges

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

8 Comments

Idoshin Over a year ago

Yep, i tried both of these solutions, doesn't working. I opened an issue in GitHub. I tried all the existing options i know, loops, object assign, set, everything. Im here after all that.

Tony Over a year ago

That's very strange. I will look into it some more. In the meantime, do you think you could create a jsfiddle of the Vue version? the one that's currently on is in vanilla JS.

Idoshin Over a year ago

Sorry, I don't understand, First, Thanks for the help, Secondly, The code above here is in Vue, the jsFiddle is in js vanila using Vue library. what exactly you mean when you say create jsfiddle of the vue version? By the way, I agree, that's very strange. I opened an issue like i said.

Tony Over a year ago

I don;t think that code is in Vue.js. This is an example of a fiddle written in Vue.js. Notice how under FRAMEWORKS AND EXTENSION, No-library (PURE JS) is selected? Compare that to the example I linked. Also, you need to initialise a vue instance . new Vue({.....}}.

Tony Over a year ago

I went to check a few other vue jsfiddle examples, and while they didn't always specify the FRAMEWORKS AND EXTENSION, bit, they always had a new Vue instance. My bad. Example 1, Example 2 and Example 3 do the same thing.

|

Collectives™ on Stack Overflow

Update object value in a loop getting the same value on all items using Vue

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest