uni-app 无法读取未定义的属性（读取‘XXX‘）-携参跳转

最新推荐文章于 2024-05-25 11:09:27 发布

卿玫

最新推荐文章于 2024-05-25 11:09:27 发布

阅读量494

点赞数

分类专栏： uni-app 携参跳转文章标签： uni-app

本文链接：https://blog.csdn.net/m0_68578079/article/details/133111182

版权

uni-app 携参跳转专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在Vue项目中实训课项目调用接口时，由于没有正确处理接口返回的图片路径数组，导致除第一张图片外其他图片无法显示并报错。解决方法是通过在获取数据时指定index，一次只获取一条数据，确保音乐列表对象有正确的属性字段。

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

写实训课项目调用字段一直报错无法读取未定义的属性（读取'url'）

因为是调用的接口，接口数据是包含图片路径url的尝试过为musicList定义一样的属性字段

				musicList: [{
					describes: '',
					id: '',
					music: '',
					music_list: '',
					name: '',
					play_number: '',
					url: ''
				}],

但是只有第一张图片不报错，其他的一样会报错

解决办法：

在获取数据的时候给一个对应的index索引值让它一次只获取一条数据，这样就可以直接调用想要的图片等数据。

获取数据前声明一个index

				let that = this
				let index = that.index

将获取的数据赋值

that.musicList = res.data[index]

完整代码

<template>
	<view>
		<view class="lplp">
			<image class="lol" :src="musicList.url" mode=""></image>
		</view>
	</view>
</template>

<script>
	// var musicList = musicList[]
	export default {
		data() {
			return {
				// 需要为musicList定义与获取到的数组属性字段一样的字段，否则虽然能够获取到数据，但是会报错
				musicList: [{
					describes: '',
					id: '',
					music: '',
					music_list: '',
					name: '',
					play_number: '',
					url: ''
				}],
				// musicList: '',
				index: ''
			}
		},
		methods: {
			onLoad(option) {
				// 获取携带的参数值
				let that = this
				console.log(option.id),
					// 获取索引
					that.index = option.id - 1
				this.getMusic()
				console.log(this.index)
			},
			getMusic() {
				let that = this
				let index = that.index
				uni.request({
					url: 'http://47.108.157.232:8889/getRankList',
					success(res) {
						//需要为musicList定义与获取到的数组属性字段一样的字段，否则虽然能够获取到数据，但是会报错
						//一次性获取多条数据会报错声明一个参数index直接获取跳转携带的参数值的对应数组的数据填充到musicList
						that.musicList = res.data[index]
						console.log(that.musicList)
					}
				})
			},

		},
	}
</script>

<style lang="less" scoped>
	.lplp {
		width: 100%;
		height: 300px;
	}

	.lol {
		width: 200px;
		height: 200px;
		border-radius: 15px;
	}
</style>

参数id是我携参跳转带的参数值。