動態數組v-bind類

我試圖設置一個二維數組的值設置爲true的項目上的類。陣列看起來像這樣：動態數組v-bind類

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。然而，我似乎無法得到正確的語法來使用它與二維數組。

任何建議什麼是實現這一目標的正確方法？

來源

2016-11-24 Cake

測試在數據對象中的外觀如何？它是一個空數組嗎？ – GuyC

是的，我創建它像測試= []，然後在mounted（）我調用一個方法來填充它。我是否應該用下一步做點什麼？我只想在模板呈現之前先運行這些方法。我該怎麼做呢..？ – Cake

由於問題似乎與組件呈現時未填充內容有關，因此只需在模板呈現此2d數組時或者在填充其內容時進行控制。

選項1

如果有權訪問所有組件時第一次創建（即，用於數據回事沒有AJAX請求）的2D陣列所需要的數據。然後只需將呼叫轉移到構建陣列到您的組件創建方法的方法，即

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

選項2

如果需要通過AJAX或某些其他原因，要求數據不能在創建的方法中填充數組，然後設置一個參數來指示它何時構建並控制其渲染，即

# 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 
    }, 
    ... 
},

來源

2016-11-24 16:17:17 GuyC

這樣排序嗎？ – GuyC

聰明的解決方案！謝謝：） – Cake

動態數組v-bind類

回答

相關問題