まず第一に、公式の定義は変更できません。
Vue は次の配列への変更を検出できません。
- インデックスを使用して配列項目を直接設定する場合、例: vm.items[indexOfItem] = newValue
- 配列の長さを変更する場合、例: vm.items.length = newLength
1. 添え字全体を直接置き換えます
<ul>
<li v-for="(item, index) in timeWait" :key="index">
<span>系统正在运行,请稍等... {
{ !isNaN(item.value)?('当前结果是:'+item.value):'' }}</span>
</li>
</ul>
created() {
this.timeWait.push({id:'001',value:90})
},
methods: {
handelOk(type, data) {
this.timeWait[0] = {id:'002',value:80}
}
結果: 変更は失敗し、ページは変更されません。
2. 添え字を使用して属性を追加する
created() {
this.timeWait.push({id:'001'})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 80;
}
結果: 変更は失敗し、ページは変更されません。
3. 添え字を使用してオブジェクトを変更する
created() {
this.timeWait.push({id:'001',value:80})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 900;
}
結果: 変更は成功し、ページが変わります。これは、多くの専門家が、添字によって配列を応答型に変更できると言っている理由でもあります。
補足:この2つの方法で追加した場合は修正できませんが、修正後すぐにデータをpushすると魔法のようにページが表示されるようになります。
created() {
this.timeWait.push({id:'001'})
},
methods: {
handelOk(type, data) {
this.timeWait[0].value = 80;
this.timeWait.push('')
}