vue,请求获取图片code,img中产生两次src获取资源问题
示例代码:<template><!-- 1、 --><img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''"><!-- 2、<table clas
·
示例代码:
<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中一定需要相对应。
更多推荐
已为社区贡献6条内容
所有评论(0)