您好,登錄后才能下訂單哦!
數據丟失是框架的BUG,vue中的數據綁定是通過ES5中屬性的特性實現的。所以沒有設置特性的數據,就會丟失。以下mounted中的四種操作都會導致數據丟失。
<
template>
<
div>
<
div>{{ colors }}
</
div>
<
div>{{ obj }}
</
div>
<
div>{{ intro }}
</
div>
</
div>
</
template>
<
script>
export
default {
data() {
return {
colors: [
"red",
"green",
"blue"],
obj: {},
};
},
mounted() {
// 1 數組中的值類型修改
this.colors[1] = "pink";
// 2 數組中的新成員
this.colors[3] = "gold";
// 3 對象中的新屬性
this.obj.size = 200;
// 4 未初始化的數據
this.intro = "111111";
},
};
</
script>
解決方法:
第1,2種情況 使用新數組替換之前的老數組
this.colors = [
"red",
"pink",
"blue",
"gold"]
第3種情況 使用新對象替換之前的老對象
this.obj = {siz:
200}
第4種情況 初始化這類數據即可
data() {
return {
colors: [
"red",
"green",
"blue"],
obj: {},
intro:
''
// 初始化info
};
},
除此之外,還可以使用vue提供的$set方法
this.$
set(
this.colors,
1, pink)
// 修改數組的數據
this.$set(this.obj, 'size', 200) // 修改對象的數據
2020Vue全套教程全開源(強烈推薦)https://pan.baidu.com/s/15_Q2Mn_Vr_vL6PaJJ7ueGw
這是給課后的驚喜,熬夜錄的,學習的伙伴可以留言!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。