Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to obtain computed calculation attributes and data data in Vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope that this article "how to obtain computed calculation attributes and data data in Vue" can help you solve the problem.

Computed calculation attributes and data data acquisition

Get the data (objects, arrays), intercept part of it and display it in the page, use computed to calculate the attributes to intercept the data and then output it directly to the page.

{{ActiveData.title}}

Activity time: {{ActStart}} to {{ActEnd}}

Registration time: {{SigStart}} to {{SigEnd}}

Data () {return {ActiveData: ", / / activity details all data}}, methods: {/ / get the corresponding data this.ActiveData = response.data.data;} computed: {ActStart () {console.log (this.ActiveData.activity_starttime); return this.ActiveData.activity_starttime.substring (5Power11);}, ActEnd () {return this.ActiveData.activity_endtime.substring (5d11) }, SigStart () {return this.ActiveData.signup_starttime.substring (5Power11);}, SigEnd () {return this.ActiveData.signup_endtime.substring (5p11);},}

The page showed the desired effect, but also reported an error! That's because the data in data is obtained by executing the function in mouted, after computed, so the ActiveData data in data is still empty at the first time of computed calculation, so computed cannot find the data in ActiveData.

It will be called undefinded, followed by Error in render: "TypeError:." After getting the value, the obtained value appears again after recalculation.

Solution one

Assign a default value to the data to be intercepted, and the computed calculation attribute will first calculate the default value, and then recalculate it after obtaining the new value, so that the undefinded error will not be reported.

Data () {return {ActiveData: ", / / activity details all data ActStarts:", / / event start time ActEnds: ", / / activity end time SigStarts:", / / registration start time SigEnds: ", / / registration end time}}, methods: {/ / get the corresponding data 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 (5Magne11);}, ActEnd () {return this.ActEnds.substring (5L11) }, SigStart () {return this.SigStarts.substring (5Power11);}, SigEnd () {return this.SigEnds.substring (5j11);},},} solution 2

Add if judgment to computed, and return the corresponding data in computed only when there is data in ActiveData in data.

Data () {return {ActiveData: ", / / activity details all data}}, methods: {/ / get the corresponding data 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 (5L11) }}, ActEnd () {if (this.ActiveData.activity_endtime! = = undefined) {return this.ActiveData.activity_endtime.substring (5Power11);}}, SigStart () {if (this.ActiveData.signup_starttime! = = undefined) {return this.ActiveData.signup_starttime.substring (5C11) }, SigEnd () {if (this.ActiveData.signup_endtime! = = undefined) {return this.ActiveData.signup_endtime.substring (5Power11);},},} computed calculates the value of the object with the attribute, and reports an error undefined for the first time

The code is as follows:

Data () {return {limit:3, checkedIndex:0, addressList: [], isMdShow:false, addressId: ""} }, components: {NavHeader, NavFooter, NavBread, Modal}, mounted () {this.init ()}, computed: {addressListFilter () {return this.addressList.slice}, selectedAddressId () {/ / if (this.addressList.length > 0) {let data = this.addressList [this.checkedIndex] .addressId console.log (this.addressList) "=") return data / /}

Picture:

Note that when initializing, addressList is still an empty array, so the addressList object does not exist, and there must be no addressId attribute, so undefined will be reported.

Error reporting and printing valu

Solution

Well, we can now know that the reason for reporting the error is that the addressList was not assigned at the time of the first calculation, so we can make a judgment. When the addressList has a value, we are doing the calculation.

This is the end of the introduction on "how to obtain computed calculation properties and data data in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.