Question

我知道我可以使用Vue.set来修改数组中的单个元素： https://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。

更新：由于对数组的警告，我们需要使用slice来更新数组。阅读https://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]]

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

1 个答案: