uni-app如何在图片上绑定选择按钮radio

如何在图片上绑定选择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;
}