使用computed_VUE中computed计算属性和data数据获取的问题

3622022

于 2021-01-15 02:45:55 发布

阅读量4.1k

点赞数

文章标签：使用computed

本文链接：https://blog.youkuaiyun.com/weixin_32567181/article/details/112709540

版权

本文探讨了在Vue中使用computed计算属性处理数据时遇到的问题，即当data中的数据在mounted后才获取，导致computed计算时数据未定义。通过两种方式解决了这个问题：一是为data属性设置默认值，确保computed在初次计算时有值；二是利用if判断，仅在data数据存在时执行computed计算。这两种方法可以帮助避免渲染时出现TypeError。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取到数据（对象、数组），截取一部分显示到页面中，用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_en

最低0.47元/天解锁文章