老衲as用飘柔 2022-09-15 15:06 采纳率: 100%
浏览 185
已结题

vue中无法读取未定义属性

<template>
  <div class="collection">
    
    <searchNavBarVue></searchNavBarVue>
    <div class="title">
      <h2>我的收藏</h2>
    </div>
    <div class="coll-cont">
      <ul>
        <li v-for="item in collectGoodsList" :key="item.id" @click="toGoodsInfo">
          <img :src="item.list_pic_url" alt="">
          <p class="name">{{item.name}}</p>
          <p class="price">{{item.retail_price}}</p>
        </li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {listAction as listActionAPI} from '@/api/my/collection';
import searchNavBarVue from "@/components/searchNavBar.vue";
export default {
  data() {
    return {
      collectGoodsList:[],
      openId:localStorage.getItem('openId'),
    };
  },
  components: {
    searchNavBarVue,
  },
  methods: {
    //获取收藏列表
    getListAction(){
      listActionAPI({
        openId:this.openId
      }).then(res => {
        console.log("listAction",res);
        this.collectGoodsList = res.data.collectGoodsList;
      })
    },
    //点击跳转到商品详情页
    toGoodsInfo(){
      this.$router.push('/goodsInfo')   //报错来自这里
    }
  },
  mounted() {
    this.getListAction();
  },
};
</script>

<style lang="scss" scoped>
  @import './style.scss'
</style>

img

请问一下,这个报错怎么解决?

  • 写回答

6条回答 默认 最新

  • 赵小左 前端领域新星创作者 2022-09-15 15:56
    关注

    collectGoodsList 这个数组有可能会碰到空的情况。
    完整做法下建议:

    1. 判断 collectGoodsList.length > 0. 意思就是,当 collectGoodsList 数组不为0的时候再去循环。
    2. 将 item.name 改为 item.name || " "。 意思就是,当 item.name 有值的时候就显示 item.name 否则就显示 控制符。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 9月28日
  • 已采纳回答 9月20日
  • 创建了问题 9月15日

悬赏问题

  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器
  • ¥15 爬取网页信息并保存需要完整代码