Vue data binding problem

1.
clipboard.png
2.
clipboard.png

data(){


},{


}]
}
}

clipboard.png

Supplementary Code:
template

 <div>
                        <a target="_blank" class="mtjjLinkJs" :href="base+`systNotice/system/article/artCont.do?id=${hahahha(listShort2[0].id)}-sharptype=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":"20181022","endTime":"","publisher":""},{"startTime":"","id":"8a7dab07667af1c901668038f21a014e","createTime":"2018-10-17","title":"","thumbnail":"8a7dab0766263c190166803374df4b45","link":"","picView":"","isTop":"0","releaseTime":"20181015","endTime":"","publisher":""},{"startTime":"","id":"8a7dab0766298211016651b63cfe027a","createTime":"2018-10-08","title":"","thumbnail":"8a7dab0766263c19016651b61b9a7bbd","link":"","picView":"","isTop":"0","releaseTime":"2018928","endTime":"","publisher":""}],"success":true}
Jan.08,2022

add defensive programming judgment.

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

  1. try this: src= "'asdsadasd' + bianliang". It's best to use computed to handle the properties that need to be calculated
  2. do you have an extra ")" after your parameter?

When

objects want to be data bound, it is best to add a v-if judgment to the outer layer to determine the initial value of the data. Then access it in the form of [] , and add replacement values, such as:


  <img :src="`http://********/${listShort2[0]['thumbnail'] || 'default.png'}`" />
</div>

in addition, the template string of ES6 is designed to solve the inconvenience caused by +, so there is no need to mix it up.

Menu