如何在图片上绑定选择radio
先上结果图
html
<radio class="main-icon-radio" :id="imgitem.name" :value="imgitem.value" :checked="index === current"/>
<label :for="imgitem.name">
<image style="width: 150rpx; height: 150rpx;" :src="imgitem.item"></image>
</label>
<label :for="imgitem.name">
绑定radio中的id
:id="imgitem.name"
设置绑定值
js
data() {
return {
images: [
{
name: '家庭教育1',
item: '/static/imgVoteCreate/v1.png',
value: '家庭教育1'
},
{
name: '节日活动1',
item: '/static/imgVoteCreate/v2.png',
value: '节日活动1'
},
{
name: '运动比赛1',
item: '/static/imgVoteCreate/v3.png',
value: '运动比赛1'
},
{
name: '影音播放1',
item: '/static/imgVoteCreate/v4.png',
value: '影音播放1'
},
{
name: '家庭教育2',
item: '/static/imgVoteCreate/v1.png',
value: '家庭教育2'
},
{
name: '节日活动2',
item: '/static/imgVoteCreate/v2.png',
value: '节日活动2'
},
{
name: '运动比赛2',
item: '/static/imgVoteCreate/v3.png',
value: '运动比赛2'
},
{
name: '影音播放2',
item: '/static/imgVoteCreate/v4.png',
value: '影音播放2'
}
]
}
css
.main-icon-radio {
position: absolute;
}