一个简单的radiogroup绑定

一个简单的radiogroup绑定demo

<template>
	<view>
		<view class="uni-list">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<!-- 输出点击的哪一项  -->
		<view>选择了：{{selectItem}},多少钱{{howmuch}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输出列表
				items: [{
						value: 'pork',
						name: '猪肉',
						money:"30.00"
					},
					{
						value: 'beef',
						name: '牛肉',
						money:"45.00"
					},
					{
						value: 'fish',
						name: '鱼',
						money:"14.00"
					},
					{
						value: 'break',
						name: '面包',
						money:"2.50"
					},
					{
						value: 'guodong',
						name: '果冻',
						money:"24.00"
					},
					{
						value: 'tomato',
						name: '西红柿',
						money:"8.00"
					},
				],
				// 点击了第几个
				current: [],
				// 已经选择
				selectItem:"",
				howmuch:""
			}
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					// evt.detail.value  点击
					if (this.items[i].value === evt.detail.value) {
						// 第几个
						this.current = i;
						break;
					}
				}
				// 选了什么显示
				this.selectItem=this.items[this.current].name
				// 多少钱显示
				this.howmuch=this.items[this.current].money
				// 更新
				this.$forceUpdate();
			}
		}
	}
</script>