動的配列vバインドクラス

Question

2次元配列の値がtrueに設定されているアイテムにクラスを設定しようとしています。配列は次のようになります。

test[item][day] 

そして、作成され、メソッドに設定されます。

テンプレート：

<div> 
<div v-for="item in items" class="item-row"> 
    <div class="item-name">item: {{ item.id }}</div> 
    <div v-for="day in days" class="item-header" v-bind:class="{'activeDay' : test[item.id][day]}">{{ day }}</div> 
    </div> 
</div> 

この「作品」が、私はエラーを取得する実行します。配列は遅すぎる私は推測で埋めますので

vue.js?3de6:2902 TypeError: Cannot read property '0' of undefined(…)

これはありますか？私は配列を次のように設定しました：test [1] [2] = 'true'、しかし私はVue.setを使っているはずです。しかし、私は二次元配列でそれを使用する正しい構文を得ることができません。

これを達成するための正しい方法は何ですか？

Answer 1

コンポーネントがレンダリングされるときに表示されないコンテンツに関連しているように見えるので、テンプレートがこの2次元配列をレンダリングするとき、またはそのコンテンツを埋め込むときのどちらかを制御するだけです。

オプション1

あなたは、コンポーネントが最初に作成されたときに2次元配列が必要とするすべてのデータ（起こってデータのための、すなわちなしのAjaxリクエスト）へのアクセス権を持っている場合。あなたは、AJAXを介して、または他のいくつかの理由ができないためにデータを要求する必要がある場合は、単に方法、すなわち

created() { 
    this.buildItems() 
}, 
... 

オプション2

を作成したコンポーネントに、アレイを構築するメソッドの呼び出しを移動

# template 
<div v-if="itemsReady" v-for="item in items" class="item-row"> 

# script 
data() { 
    return { 
    itemsReady: false, // set to true when you have built the items array 
    ... 
    }, 
}, 
methods: { 
    buildItems() { 
    ... // logic to build array 
    this.itemsReady = true 
    }, 
    ... 
},