vue數(shù)據(jù)push后不能響應(yīng)式更新的問題
更新時(shí)間：2024年03月11日 09:02:19 作者：長春小霸王
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應(yīng)式更新的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue數(shù)據(jù)push后不能響應(yīng)式更新
未新屬性先開辟空間
if (res.data.length > 0) {
// var goodesMap = new Map()
var temp_goodsList = []
var trandeProductList = res.data
navItem.orderList.push({
goodsList: []
})
for (var i = 0; i < navItem.orderList.length; i++) {
for (var j = 0; j < trandeProductList.length; j++) {
if (navItem.orderList[i].tradeNo == trandeProductList[j].trandeForm
.tradeNo) {
temp_goodsList.push(trandeProductList[j])
}
}
navItem.orderList[i]["goodsList"] = temp_goodsList
// Object.assign(navItem.orderList[i], goodesMap.get("goodsList"));
// navItem.orderList[i].push(goodsList)
temp_goodsList = []
// goodesMap.clear()
}
// var s = that.navList[0].orderList[0].goodsList.length
// for (var i = 0; i < navItem.orderList.length; i++)
// {
// for (var j = 0; j < navItem.orderList[i].goodsList.length; j++) {
// console.log(navItem.orderList[i].goodsList[j].product.name)
// }
// }
}vue如何更新響應(yīng)式數(shù)組與對象的內(nèi)容
data: {
// 1.基礎(chǔ)數(shù)據(jù)類型，字符串 :this.xxx 直接修改數(shù)據(jù)
title:"vue",
// 2.數(shù)組類型 :使用7個(gè)變異函數(shù)修改
ingredients: ['meat', 'fruit', 'cookies'],
// 2-2：數(shù)組內(nèi)容為對象
// ①:如果是更改對象里的某一元素則 this.persons[1].xxx
// ②:如果是修改整個(gè)對象內(nèi)容 也是使用7個(gè)變異函數(shù)修改
persons: [
{ name: 'Vane', age: 38, color: 'red' },
{ name: 'Fang', age: 27, color: 'blue' },
],
// 3.對象類型
// ①:如果修改原有響應(yīng)式數(shù)據(jù)，則 userInfo.xxx修改
// ②:如果是新增響應(yīng)式數(shù)據(jù)，則 this.$set(this.userInfo,'xxx','x')
userInfo:{
name:"wangwu",
age:19
}
},1-更新基礎(chǔ)數(shù)據(jù)類型(字符串)
this.title="vue2" 直接修改數(shù)據(jù)
2-更新數(shù)組類型
不可以使用this.xxx直接修改數(shù)據(jù)
使用7個(gè)變異函數(shù)修改 pop,push,shift,unshift,splice,sort,reverse，它們是已經(jīng)在vue當(dāng)中進(jìn)行了二次改造
this.ingredients[1]="soup" // 失敗 this.ingredients.splice(1,1,"soup") // 成功
2-2：數(shù)組內(nèi)容為對象
1.修改對象中的某一屬性：
this.persons[1].name="lisi"
2.用變異函數(shù)整體修改：
this.persons.splice(1,1,{name: 'zhangsan', age: 20, color: 'green'})3.直接進(jìn)行數(shù)組元素的整體替換，是不行的
this.persons[1]={ name: 'zhangsan', age: 20, color: 'green' }3-對象類型
1.如果修改原有響應(yīng)式數(shù)據(jù)，則 userInfo.xxx修改
2.如果是新增響應(yīng)式數(shù)據(jù)，則 this.$set(this.userInfo,'xxx','x')。
this.$set：第一個(gè)參數(shù)就是目標(biāo)對象，第二個(gè)參數(shù)是對象的屬性，第三個(gè)參數(shù)是對象的屬性值
注意：
- this.userInfo.sex="男" 使用this.xxx直接增加的數(shù)據(jù)，不是響應(yīng)式數(shù)據(jù)，不會出現(xiàn)在vue調(diào)試工具里。
- 他僅僅是普通的屬性節(jié)點(diǎn)，并不是響應(yīng)式的屬性節(jié)點(diǎn)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在做文字處理的項(xiàng)目時(shí)經(jīng)常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
最近做項(xiàng)目遇到的一個(gè)功能,禁止用戶在輸入內(nèi)容的時(shí)候選擇今天以前的日期或者包含今日的日期,本文主要介紹了element?時(shí)間選擇器禁用選擇的使用示例,感興趣的可以了解一下2023-09-09
el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
Vue指令之 v-cloak、v-text、v-html實(shí)例詳解
當(dāng)用戶頻繁刷新頁面或網(wǎng)速慢時(shí)，頁面未完成 Vue.js 的加載時(shí)，導(dǎo)致 Vue 來不及渲染，這就會導(dǎo)致在瀏覽器中直接暴露插值(表達(dá)式)，這篇文章主要介紹了Vue指令 v-cloak、v-text、v-html,需要的朋友可以參考下2019-08-08
vue2 router 動態(tài)傳參,多個(gè)參數(shù)的實(shí)例
下面小編就為大家?guī)硪黄獀ue2 router 動態(tài)傳參,多個(gè)參數(shù)的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
在vue的項(xiàng)目開發(fā)中,我們會遇到加載excel或者csv等情形,這個(gè)示例展示了這個(gè)需求,上傳一個(gè)excel文件,通過解析,生成數(shù)組,然后再列表中將內(nèi)容展示出來,這篇文章主要介紹了vue上傳解析excel文件,列表中輸出內(nèi)容,需要的朋友可以參考下,2023-09-09
vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue實(shí)現(xiàn)用戶沒有登陸時(shí),訪問后自動跳轉(zhuǎn)登錄頁面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒有登陸時(shí)，訪問后自動跳轉(zhuǎn)登錄頁面,定義路由的時(shí)候配置屬性，這里使用needLogin標(biāo)記訪問頁面是否需要登錄，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10