导航：首页 > 开发技术 >

Vue中computed计算属性和data数据怎么获取

发表于：2025-01-17 作者：千家信息网编辑

千家信息网最后更新 2025年01月17日，这篇文章主要介绍"Vue中computed计算属性和data数据怎么获取"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"Vue中computed计算属性和dat

千家信息网最后更新 2025年01月17日Vue中computed计算属性和data数据怎么获取

这篇文章主要介绍"Vue中computed计算属性和data数据怎么获取"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"Vue中computed计算属性和data数据怎么获取"文章能帮助大家解决问题。

computed计算属性和data数据获取

获取到数据（对象、数组），截取一部分显示到页面中，用computed计算属性来实现截取数据然后直接输出到页面。

  {{ActiveData.title}}
      活动时间：{{ActStart}} 至 {{ActEnd}}
    报名时间：{{SigStart}} 至 {{SigEnd}}

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