2017-04-06 1 views
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 
+0

@m_callensキャッチのおかげで – ytbryan

答えて

2

はこれがcaveatです。これを試して。

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

ありがとうございました:) – ytbryan

関連する問題