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>

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

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

1. 判断 collectGoodsList.length > 0. 意思就是，当 collectGoodsList 数组不为0的时候再去循环。
2. 将 item.name 改为 item.name || " "。 意思就是，当 item.name 有值的时候就显示 item.name 否则就显示 控制符。

1.接口返回时候，加上返回数据为空判断，如果为空collectGoodsList赋值空数组
2.ul标签上面加上collectGoodsList为空和为空数组判断
3.{{item.name}}改为{{item.name || ‘’}}
4.确保接口返回字段有name字段

name属性 不存在 。

ul标签加个v-if

<ul v-if="collectGoodsList  && collectGoodsList.length > 0">

你的collectGoodsList没有name这个属性，找不到它，

这是页面初始化时接口还没有返回数据导致的。
两个办法：
1、在data里面定义下collectGoodsList:[{name:'',retail_price:''}]
2、{{item.name || ‘’}}、{{item.retail_price|| ‘’}}
在者打印下接口返回的数据，看下有没有name和retail_price两个字段