1.第一步,先从后台获取到你要用的id
2.第二步,循环出来所有数据,渲染到页面上
3.第三步,给你要点击的绑定上监听事件,绑定id
4.第四步,根据你点击的id,再拿去请求接口调用数据
<view>
<!--transList里面有我们要用的仪表id,首先先循环它-->
<!--绑定一个点击监听事件 selectTransId,到这一步先看methods的内容,和上面的events知识点-->
<view v-for="item in transList" @click="selectTransId($event)">
<!--给图片上绑定 :data-id="item.trans_id" -->
<image src="../../../../static/img/home/byqa.png"
:data-id="item.trans_id"
:data-name="item.trans_name"></image>
</view>
</view>
methods: {
data() {
return {
transList: [],
transid: '',
transname: '尚未选择',
}
},
//获取变压器列表里的这个id
gettransList() {
this.$http.get('XXXXXX', {
station_id: XXX
}).then(res => {
let server = res.data.data;
this.transList = [];
server.forEach(item => {
this.transList.push({
trans_name: item.trans_name,
trans_id: item.trans_id
})
console.log(this.transList)
})
})
},
// 获取点击的变压器id和名称
selectTransId(event) {
//这里的this.transid,我是为了获取点击的事件里的内容,纯粹展示使用
this.transid = event.target.dataset.id
this.transname = event.target.dataset.name
},
}