Vue.js v-for loop binding items objects in array and update on change

Question

I have a component and am using a v-for loop to loop through and object array at the $root level of my app to populate a list.

In other components in my app I'll EventBus.$emit data to update tables in my database. That means the $root array data updates.

Is there a way to bind or map the v-for list I created to detect and update using the index or another method?

Here is the example loop and example $root data.

I guess I'm hoping there's a way to connect an object in an array by using [index]

<v-list-item-content v-if="this.$root.people">
  <div v-for="(item, index) in this.$root.people" :key="item.id">
    <div>
      <span v-html="this.$root.people[index].value"></span>
    </div>
  </div>
</v-list-item-content>

My array looks like this.

people:Array[2]
 0:Object
  event_id:6
  submission_values:Array[4]
   0:Object
    value:"Danny"
   1:Object
   2:Object
   3:Object

tony19 · Accepted Answer · 2022-07-16 05:08:56Z

1

I suppose if people is already reactive then you should look at how you update this array. There are some caveats about updating a reactive array in VueJS, please take a look at the official documentation

edited Jul 16, 2022 at 5:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 15, 2020 at 19:45

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Vue.js v-for loop binding items objects in array and update on change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related