vue,请求获取图片code,img中产生两次src获取资源问题

示例代码:

<template>
    <!-- 1、 -->
    <img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''">
<!-- 2、<table class="table-content" v-if="list.ActivityMemberList.length > 0"> -->
    <table class="table-content" v-if="ActivityMemberList.length > 0">
		<tr v-for="(infoItem, inforIndex) in ActivityMemberList" :key="inforIndex">
			<td>{{Number(inforIndex) + 1}}</td>
			<td>{{infoItem.CreateAccount}}</td>
			<td>{{infoItem.BuyQuantity}}</td>							
		</tr>
	</table>
</template>
<script>
    created () {
        this.getList ();
    },
    data () {
        return: {
            imgUrl: Site.api.upfileBaseUrl,
            list:{},
            MainImg: '',
            ActivityMemberList: [],
        }
    },
    watch () {
        list: {
            handler: function (val, oldVal) {
                this.MainImg = val.MainImg;
                this.ActivityMemberList = val.ActivityMemberList; 
            }
        }
    },
    methods: {
        getList () {
            //请求中获取的数据data(对象)
            this.list = data;
        }
    }
</script>

注意:

1、created获取初始化数据,请求返回需要时间,如果请求返回的数据直接绑定到src,dom加载完成后,src的值从undefined变为相应的code,造成获取两次src的问题?

解决: watch监听请求返回的数据,code赋值给src,并且在src为空的情况下不显示img。

2、html结构中list.ActivityMemberList是获取不到的,所以list.ActivityMemberList.length是报错的。

解决: 模板中绑定的结构中,v-if使用时,data中一定需要相对应。

猜你喜欢

转载自blog.csdn.net/github_39598787/article/details/81204853