vue数据绑定问题

Question

1.

2.

以上俩种都会报错
data(){

return { listShort2: [{
id:1,
thumbnail:2

},{

id:2,
thumbnail:4

}]
}
}

由于结构复杂，不能循环绑定，只能逐一绑定。

由以上截图可以绑定上数据，但是控制台会报错

补充代码：
template

 <div>
                        <a target="_blank" class="mtjjLinkJs" :href="base+`systNotice/system/article/artCont.do?id=${hahahha(listShort2[0].id)}#type=2`">
                            <img class="dMImg mt_dMImg" alt="" :src="`https://www.shoujinwang.com/CnpayFileServer/commonAttach/display/${hahahha(listShort2[0].thumbnail)}`">
                            <div class="dMitle mt_dMitle">{{listShort2[0]&&listShort2[0].title}}</div>
                        </a>
                    </div>

js

                this.util.ajax({
                    url: '/api/systNewsInfo/listShort',
                    method: 'get',
                    params: {
                        pageNum: pageN,
                        pageSize: pageS,
                        cate: cat
                    }
                }).then(res => {
                    if (cate == 1) {
                        this.listShort = res.data.rows[0];
                        console.log(this.listShort)
                    } else if (cate == 2) {
                        this.listShort2 = res.data.rows;
                    } else if (cate == 3) {
                        this.listShort3 = res.data.rows;
                        console.log(this.listShort3[0], '123')
                    }
    
                })

json

{"currPage":1,"pageNum":0,"pageSize":3,"total":22,"totalPage":8,"rows":[{"startTime":"","id":"8a7dab076686ed3d0166aac0653504e2","createTime":"2018-10-25","title":"首金网10月开放日：合规进程全解读","thumbnail":"8a7dab0766a1627c0166aabd292f7936","link":"","picView":"","isTop":"1","releaseTime":"2018年10月22日","endTime":"","publisher":"首金网"},{"startTime":"","id":"8a7dab07667af1c901668038f21a014e","createTime":"2018-10-17","title":"首金网提交合规自查报告","thumbnail":"8a7dab0766263c190166803374df4b45","link":"","picView":"","isTop":"0","releaseTime":"2018年10月15日","endTime":"","publisher":"首金网"},{"startTime":"","id":"8a7dab0766298211016651b63cfe027a","createTime":"2018-10-08","title":"直播互动节目《首金跟您聊网贷》上线了！","thumbnail":"8a7dab0766263c19016651b61b9a7bbd","link":"","picView":"","isTop":"0","releaseTime":"2018年9月28日","endTime":"","publisher":"首金网"}],"success":true}

Answer 1

1. 试试这样 :src="'asdsadasd' + bianliang", 最好的办法用computed处理需要计算的属性
2. 你参数后面是不是多了一个")"?

Answer 2

加个防御性编程的判断。

<template>
 ....
 <span>{{listShort2[0] && listShort2[0].thumbnail}}</span>
</template>

Answer 3

对象要数据绑定时，最好在外层加一个 v-if 判断，以判断数据初始有值。然后访问的时候使用 [] 的形式访问，并添加替换值，如：

<div v-if="listShort2 && Array.isArray(listShort2) && listShort2.length > 0">
  <img :src="`http://********/${listShort2[0]['thumbnail'] || 'default.png'}`" />
</div>

另外，ES6 的模板字符串是为了解决 + 带来的不便的，所以，没必要混用的。