vue.js - 如何在 Vue 模板中的数组中使数据响应

Question

<template>
  <button v-on:click="modify"> modify </button>
  <div v-model="lists">{{ lists[0] }}</div>
</template>

<script>
export default {

 methods: {
    modify: function() {
      console.log(this.lists)
      this.lists[0][0] = 2
      console.log(this.lists)
    },

  data: function () {
    return {
      lists: [[1,2,3],[2,3,3]]
    }
  }
}
</script>

模板中的数组似乎没有更新。但是日志控制台已经改变了。

当数据是数组时，如何使其具有反应性？

实际发生的情况:

Before clicking modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 1

预期结果:

Before clicking  modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 2

Answer 1

这是一个caveat在 Vue.js 中通过索引更新数组时试试这个。

this.lists[0].splice(0,1,2)