您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue中computed計(jì)算屬性和data數(shù)據(jù)怎么獲取”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“Vue中computed計(jì)算屬性和data數(shù)據(jù)怎么獲取”文章能幫助大家解決問題。
獲取到數(shù)據(jù)(對(duì)象、數(shù)組),截取一部分顯示到頁面中,用computed計(jì)算屬性來實(shí)現(xiàn)截取數(shù)據(jù)然后直接輸出到頁面。
<div class="detailBox"> <h2 class="detailHead">{{ActiveData.title}}</h2> <div class="detailCon"> <p><b>活動(dòng)時(shí)間:</b>{{ActStart}} 至 {{ActEnd}}</p> <p><b>報(bào)名時(shí)間:</b>{{SigStart}} 至 {{SigEnd}}</p> </div> </div>
data() { return { ActiveData:"",//活動(dòng)詳情所有數(shù)據(jù) } }, methods:{ //獲取對(duì)應(yīng)的數(shù)據(jù) this.ActiveData = response.data.data; }
computed:{ ActStart(){ console.log(this.ActiveData.activity_starttime); return this.ActiveData.activity_starttime.substring(5,11); }, ActEnd(){ return this.ActiveData.activity_endtime.substring(5,11); }, SigStart(){ return this.ActiveData.signup_starttime.substring(5,11); }, SigEnd(){ return this.ActiveData.signup_endtime.substring(5,11); }, }
頁面如愿顯示出想要的效果了,但是也報(bào)錯(cuò)了!那是因?yàn)閐ata里的數(shù)據(jù)是在mouted中執(zhí)行函數(shù)才獲取到數(shù)據(jù),是在computed之后,所以在第一次computed計(jì)算時(shí),data中的ActiveData數(shù)據(jù)還是空的,所以computed找不到ActiveData里的數(shù)據(jù)。
就會(huì)報(bào)undefinded接著是Error in render: "TypeError:……"獲取到值后重新計(jì)算又出現(xiàn)了獲取到的值。
給要截取的數(shù)據(jù)賦一個(gè)默認(rèn)值,computed計(jì)算屬性會(huì)先去計(jì)算默認(rèn)值,在獲取到新值后重新計(jì)算,就不會(huì)報(bào)undefinded的錯(cuò)誤了。
data() { return { ActiveData:"",//活動(dòng)詳情所有數(shù)據(jù) ActStarts:"",//活動(dòng)開始時(shí)間 ActEnds:"",//活動(dòng)結(jié)束時(shí)間 SigStarts:"",//報(bào)名開始時(shí)間 SigEnds:"",//報(bào)名結(jié)束時(shí)間 } }, methods:{ //獲取對(duì)應(yīng)的數(shù)據(jù) this.ActiveData = response.data.data; this.ActStarts = response.data.data.activity_starttime; this.ActEnds = response.data.data.activity_endtime; this.SigStarts = response.data.data.signup_starttime this.SigEnds = response.data.data.signup_endtime }
computed:{ ActStart(){ console.log(this.ActStarts); return this.ActStarts.substring(5,11); }, ActEnd(){ return this.ActEnds.substring(5,11); }, SigStart(){ return this.SigStarts.substring(5,11); }, SigEnd(){ return this.SigEnds.substring(5,11); }, }
在computed中增加if判斷,在data中的ActiveData里有數(shù)據(jù)時(shí)才在computed中返回對(duì)應(yīng)的數(shù)據(jù)
data() { return { ActiveData:"",//活動(dòng)詳情所有數(shù)據(jù) } }, methods:{ //獲取對(duì)應(yīng)的數(shù)據(jù) this.ActiveData = response.data.data; }
computed:{ ActStart(){ console.log(this.ActiveData.activity_starttime); if(this.ActiveData.activity_starttime !== undefined){ return this.ActiveData.activity_starttime.substring(5,11); } }, ActEnd(){ if(this.ActiveData.activity_endtime !== undefined){ return this.ActiveData.activity_endtime.substring(5,11); } }, SigStart(){ if(this.ActiveData.signup_starttime !== undefined){ return this.ActiveData.signup_starttime.substring(5,11); } }, SigEnd(){ if(this.ActiveData.signup_endtime !== undefined){ return this.ActiveData.signup_endtime.substring(5,11); } }, }
代碼如下:
data() { return { limit:3, checkedIndex:0, addressList:[], isMdShow:false, addressId:"" }; }, components: { NavHeader, NavFooter, NavBread, Modal }, mounted(){ this.init() }, computed:{ addressListFilter(){ return this.addressList.slice(0,this.limit) }, selectedAddressId(){ // if(this.addressList.length>0){ let data = this.addressList[this.checkedIndex].addressId console.log(this.addressList,"====") return data // } } },
圖片:
注意,初始化的時(shí)候,addressList還是一個(gè)空數(shù)組,那addressList[index]對(duì)象就不存在,肯定就沒有addressId這個(gè)屬性,所以會(huì)報(bào)undefined
那我們現(xiàn)在可以知道,報(bào)錯(cuò)的原因是第一次計(jì)算的時(shí)候,addressList還沒有賦值,所以,我們可以進(jìn)行一個(gè)判斷,當(dāng)addressList有值了我們?cè)谶M(jìn)行計(jì)算
關(guān)于“Vue中computed計(jì)算屬性和data數(shù)據(jù)怎么獲取”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。