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

在Vue中按索引更新数组时，这是caveat。试试这个。

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

如何在Vue模板中使用数组时使数据具有反应性

1 个答案: