学习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>