el-carousel 初始化不加载数据

Vue+Axios：解决图片加载初始显示问题

原创已于 2022-04-16 09:20:19 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-13 09:42:13 首次发布

Vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

Element

5 篇文章

订阅专栏

本文讲述了在使用Vue和Axios构建跑马灯组件时遇到的图片初始化加载不显示的问题。问题在于数据未加载前缺少默认占位符。解决方案是在数据绑定前设置一个包含默认值的对象，确保组件渲染时有内容可显示。同时，注意避免在`v-for`中使用重复的`:key`值。

vue + axios 跑马灯初始化加载数据的时候，默认没有显示图片

<el-carousel height="100%" class="height100 arrow-block arrow-button-bg" :autoplay="true"
						arrow="always" indicator-position="none" :interval="interval" ref="carouselswiper2" initial-index="0">
						<el-carousel-item v-for="list,index in swiper2" :key="index">
							<div class="xczx_lsaq_qy height100">
								<div class="xczx_lsaq_qy_img">
									<img class="width100 height100" :src="list.img" />
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>


<script>
	export default {
		data() {
			return {
				interval:5000,
				swiper1: [],
			}
		},
		created() {
			this.get()
		},
		mounted() {

		},
		methods: {
			get() {
				let that = this
				this.$http.post("api", {}, false).then((res) => {
					this.$nextTick(() => {
						that.swiper1 = res.rzlist
					})
					
				});
				
			},

		}
	}
</script>

看上去没什么问题

结果什么都没有，郁闷了好多次了。。

最后发现里面必须要有一个默认值，来占位，然后Ctrl+F5 刷新就正常了。

swiper1: [
					{
						img: '',
						lsItem: [{
								icon: '',
								label: '',
								num: '',
								unit: ''
							},
							{
								icon: '',
								label: '',
								num: '',
								unit: ''
							},
							{
								icon: '',
								label: '',
								num: '',
								unit: ''
							},
							
						]
					}
				]

:key="index" 不能重复哦