vue.js - VueJS 在嵌套数组上使用 Vue.set

Question

我知道我可以使用 Vue.set 修改数组中的单个元素: https://v2.vuejs.org/v2/guide/list.html#Caveats

但是如何修改嵌套数组或嵌套对象/数组中的单个元素？也许我的数据是这样的:

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

如何响应式地编辑每个元素？

Answer 1

这是针对 Vue.js 2.2.6 的。

假设您正在使用单文件组件.vue，您可以使用this。

例如:this.lists[0][0] = 2，会将第一个数组的第一个值改为2。

更新:由于数组的注意事项，我们需要使用切片来更新数组。阅读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>

控制台输出将是

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