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

╰+攻爆jí腚メ 2022-05-19 12:44 357阅读 0赞

示例代码：

<template>
        
        <img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''">
    
        <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中一定需要相对应。