v-model配列アイテムのプロパティにしようとしています。"[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined'コンソールに表示されるページと空白のページをロードすると。
これはvue.js2.xで行われます。
https://codepen.io/jzaun/pen/YxYyJN/
html
<div id="ai-config">
<div class="info">
<div class="row">
<h1>Resource Points</h1>
</div>
<div class="row">
<label>Total:</label>
<div class="value">
{{maxResourcePoints}}
</div>
</div>
<div class="row">
<label>Remaining:</label>
<div class="value">
{{maxResourcePoints - usedResourcePoints}}
</div>
</div>
</div>
<div>
<table>
<tr>
<td></td>
<td v-for="(option, idx) in options">
{{option.title}}
</td>
</tr>
<tr v-for="n in directions">
<td>Direction {{n}}</td>
<td v-for="option in options">
<input type="checkbox", v-model="selected[n][option.key]" />
</td>
</tr>
</table>
</div>
</div>
javascript
new Vue ({
el: '#ai-config',
data: {
maxResourcePoints: 10,
usedResourcePoints: 0,
selected: [],
directions: 8,
options: [{
title: 'Food',
key: 'viewFood',
cost: 1
}, {
title: 'Water',
key: 'viewWater',
cost: 1
}, {
title: 'Own',
key: 'viewOwn',
cost: 1
}, {
title: 'Other',
key: 'viewOther',
cost: 1
}]
},
methods: {
},
created: function () {
this.selected = [];
for(i=0; i< 8; i++) {
this.selected.push({});
}
}
});
2つの主要な問題があります。
まず、Vueのデータに追加されたオブジェクトにプロパティを動的に追加した場合、Vueはそれを検出できません。これを行うとき：
v-model="selected[n][option.key]"
createハンドラーで初期化した空のオブジェクトにプロパティを追加しています。これを修正するには、実際のプロパティで初期化するだけです（または、ここではオプションではないように見える$ setを使用します）。
this.selected.push({viewFood: false, viewOwn: false, viewWater: false, viewOther: false});
2番目（および質問で引用したエラーの原因）、範囲を使用する場合v-for、値は1から始まります。
v-model="selected[n][option.key]"
ご存知のように、Javascript配列はゼロベースであるため、エラーが1つずれています。そのはず
v-model="selected[n - 1][option.key]"
元のペンにもマイナーなHTMLエラーがありました
<input type="checkbox", v-model="selected[n][option.key]" />
カンマを削除する必要がある場所。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加