Vue3 Cannot read properties of undefined (reading ‘goodsPicture‘)

学习Vue，遇到Cannot read properties of undefined (reading 'goodsPicture')。

从vant：Vant - 轻量、可靠的移动端 Vue 组件库 (ucmed.cn) 中拷贝列表项

下面是goodsList.vue代码。

<template>
  <div class="">    
    <h3>商品列表</h3>
    <NavBar @divSearch="handleSearch" />

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in goodsList" :key="item.id"/>
        <div class="goodsList-item">
          <img :src="require('../assets/image/goods/'+item.goodsPicture)"/>
          <h3>商品名:{{ item.goodsName }}</h3>
        </div>
      
    </van-list> 

    <TabBar />
  </div>
</template>

显示是<img :src="require('../assets/image/goods/'+item.goodsPicture)"/>未定义。

经过一步步调试，发现<van-cell v-for="item in list" :key="item" :title="item" />有问题。

应该改成 ：

<van-cell v-for="item in list" :key="item" :title="item" > 

<div class="goodsList-item">

          <img :src="require('../assets/image/goods/'+item.goodsPicture)"/>

          <h3>商品名:{{ item.goodsName }}</h3>

        </div>

</van-cell>

成功！

<template>
  <div class="">    
    <h3>商品列表</h3>
    <NavBar @divSearch="handleSearch" />

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in goodsList" :key="item.id">
        <div class="goodsList-item">
          <img :src="require('../assets/image/goods/'+item.goodsPicture)"/>
          <h3>商品名:{{ item.goodsName }}</h3>
        </div>
      </van-cell>  
    </van-list> 

    <TabBar />
  </div>
</template>

<script lang="ts">
  import {Options,Vue} from 'vue-class-component'
  import { useRouter,useRoute } from 'vue-router'
  import { useStore } from 'vuex';
  import TabBar from '@/components/tabBar.vue';
  import NavBar from '@/components/navBar.vue';
  import {goodsListType} from '@/utils/interface'
  import {getGoodsListApi, getGoodsSearchApi} from '@/utils/request'


  type paramsType = {
    goodsName:string,
    currentPage:number,
    size:number
  }

  @Options({
    components:{
      TabBar,
      NavBar
    }
  })
  export default class goodsDes extends Vue{
    store = useStore()
    route = useRoute()

    searchParams:paramsType = {
      goodsName:'',
      currentPage:1,
      size:5
    }
    goodsList:goodsListType[] = []
    //下拉列表
    loading = false
    finished = false
    onload():void{
      //加载下一页
      this.searchParams.currentPage += 1
      this.loading = true
      this.handleSearch()
      this.getGoodsList(true)
    }

    
    // key = this.route.query.key as string
    key = history.state.key as string
    handleSearch(val?:string):void{
      // this.key = val 
      //三元判断当前页面navBar有参数，则this.searchParams.goodsName = val 执行    
      val ? (this.searchParams.goodsName = val):null
      
      // this.searchParams.goodsName = history.state.key 
      // console.log('this.searchParams.goodsName',this.searchParams.goodsName) 

      /* //搜索对应商品 需要使用typeof类型判断      
      if (typeof this.searchParams.goodsName == 'undefined'){
        getGoodsListApi(this.searchParams).then(res =>{
          console.log('商品数据',res)
          this.goodsList = [...this.goodsList,...res.data]
        })
      } else {
        getGoodsSearchApi(this.searchParams).then((res:any)=>{        
          console.log('商品数据',res) 
        })
      }   */
      this.getGoodsList(false)
    }
    getGoodsList(type:boolean):void{
      //搜索对应商品 需要使用typeof类型判断      
      if (typeof this.searchParams.goodsName == 'undefined'){
        getGoodsListApi(this.searchParams).then(res =>{
          console.log('商品数据',res)
          this.goodsList = res.data
          console.log('goodsList:',this.goodsList)
          /* if (type){
            this.goodsList = [...this.goodsList,...res.data]
          } else {
            this.goodsList = [...res.data]
          }   
          //分页是否完成
          if (res.data.length <= this.goodsList.length){
            this.finished = true
          }   */ 
          //请求异步结束，loading改为false
          this.loading = false    
        })
      } else {
        getGoodsSearchApi(this.searchParams).then((res:any)=>{        
          console.log('商品数据',res) 
        })
      } 
    }
    //
    public mounted(): void {
      //输入navBar 路由页面传过来的key值
      this.searchParams.goodsName = this.key
      this.handleSearch()
    }
  }
</script>
<style lang="less" scoped>
  .goodsList-item{
    .img{
      width: 100%;
    }
    background:yellowgreen;
    margin-bottom: 10px;
  }
</style>