Vue中computed計算屬性和data數據獲取方式
computed計算屬性和data數據獲取
獲取到數據(對象、數組),截取一部分顯示到頁面中,用computed計算屬性來實現截取數據然後直接輸出到頁面。
<div class="detailBox"> <h1 class="detailHead">{{ActiveData.title}}</h1> <div class="detailCon"> <p><b>活動時間:</b>{{ActStart}} 至 {{ActEnd}}</p> <p><b>報名時間:</b>{{SigStart}} 至 {{SigEnd}}</p> </div> </div>
data() { return { ActiveData:"",//活動詳情所有數據 } }, methods:{ //獲取對應的數據 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); }, }
頁面如願顯示出想要的效果瞭,但是也報錯瞭!那是因為data裡的數據是在mouted中執行函數才獲取到數據,是在computed之後,所以在第一次computed計算時,data中的ActiveData數據還是空的,所以computed找不到ActiveData裡的數據。
就會報undefinded接著是Error in render: "TypeError:……"獲取到值後重新計算又出現瞭獲取到的值。
解決方法一
給要截取的數據賦一個默認值,computed計算屬性會先去計算默認值,在獲取到新值後重新計算,就不會報undefinded的錯誤瞭。
data() { return { ActiveData:"",//活動詳情所有數據 ActStarts:"",//活動開始時間 ActEnds:"",//活動結束時間 SigStarts:"",//報名開始時間 SigEnds:"",//報名結束時間 } }, methods:{ //獲取對應的數據 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裡有數據時才在computed中返回對應的數據
data() { return { ActiveData:"",//活動詳情所有數據 } }, methods:{ //獲取對應的數據 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); } }, }
computed計算屬性取對象的值,第一次報錯undefined
代碼如下:
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 // } } },
圖片:
註意,初始化的時候,addressList還是一個空數組,那addressList[index]對象就不存在,肯定就沒有addressId這個屬性,所以會報undefined
報錯和打印值
解決方案
那我們現在可以知道,報錯的原因是第一次計算的時候,addressList還沒有賦值,所以,我們可以進行一個判斷,當addressList有值瞭我們在進行計算
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue2 cube-ui時間選擇器詳解
- Java定時任務schedule和scheduleAtFixedRate的異同
- Java查詢時間段(startTime–endTime)間的數據方式
- vue日歷組件的封裝方法
- 如何理解Vue中computed和watch的區別