VueJS Using Vue.set on a nested array

Question

I know I can use Vue.set to modify a single element in an array: https://v2.vuejs.org/v2/guide/list.html#Caveats

But how can I modify a single element in a nested array or nested object/array? Perhaps it my data looks like this:

data:{
      lists:[[1,2,3],[2,3,4]],
      another_list:[[213,123, {hello:'sdf'}], 12, 123]
}

How can I edit every single element reactively?

why don't you use methods object and loop through your array elements? — Amr Aly
– Amr Aly, Commented Apr 5, 2017 at 13:02
For example modify the first nested element of lists: Vue.set('lists[0][0]', 2); — M. Suurland
– M. Suurland, Commented Apr 5, 2017 at 14:19

tony19 · Accepted Answer · 2022-07-15 02:50:53Z

1

This is for Vue.js 2.2.6.

Assuming you are using single-file component .vue, you can use this.

For example: this.lists[0][0] = 2, will change the first value of first array to 2.

Update: due to the caveat with array, we need to use slice to update arrays. Read https://v2.vuejs.org/v2/guide/list.html#Caveats

<template>
 <button v-on:click="modify"> modify </button>
</template>

<script>
export default {

    methods: {
      modify: function() {
        console.log(this.lists)
        this.lists[0].splice(2,2,3) 
        console.log(this.lists)
      }
    }, 
    
  data: function () {
      return {
          lists:[[1,2,3],[2,3,4]],
          another_list:[[213,123, {hello:'sdf'}], 12, 123]
      }
    }
}
</script>

The console output will be

[[1,2,3],[2,3,4]]
[[2,2,3],[2,3,4]]

edited Jul 15, 2022 at 2:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 5, 2017 at 16:07

ytbryan

2,67432 silver badges50 bronze badges

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

7 Comments

user1506145 Over a year ago

Thanks! Will the reactivity work as well? For instance if I have {list[0][0]}, will it rerender?

Amr Aly Over a year ago

I think you forgot the s instead of method it needs to be methods

ytbryan Over a year ago

Thanks for pointing out Amr. Yes, the reactivity will work.

ytbryan Over a year ago

@user1506145 It seems that array does not get updated and will not rerender. This is weird because it works for other types like string. Will update you if I find something.

ytbryan Over a year ago

Asked the question here stackoverflow.com/questions/43243637/… @user1506145

|

Collectives™ on Stack Overflow

VueJS Using Vue.set on a nested array

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related