1
<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>
テンプレートの配列が更新されていないようです。しかし、ログコンソールが変更されました。Vueテンプレートに配列されているときにデータを反応させる方法
データが配列のときにどのように反応させるのですか?
実際に何が起こっている:
Before clicking modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 1
期待されているもの:Vueの中でインデックスで配列を更新する際に
Before clicking modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 2
@m_callensキャッチのおかげで – ytbryan