如何在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公司更新由索引數組時。嘗試這個。

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