实现单选功能

九帅羽2024-05-31 23:56

html:

html 复制代码

<view class="list" v-for="(item,index) in listInfo" :key="item.dlsNo" @click="selectClick(item,index)">
	<view class="radio" :class='{active :item.radio == 1}'></view>
	<view class="ct">
	    <text>{{item.name}}</text>
	    <view>代理商编号：{{item.dlsNo}}</view>
	    <view>手机号:{{item.phoneNum}} <text>{{item.shName}}</text></view>
	</view>
</view>

js:

javascript 复制代码

<script>
export default {
  data() {
    return {
      listInfo: [
        {
          name: '乔一封',
          dlsNo: '3748723891',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        },
        {
          name: '张三',
          dlsNo: '3748723824',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        },
        {
          name: '李四',
          dlsNo: '3748723394',
          phoneNum: '13234445445',
          shName: '河南郑州',
          radio: 2,
        }
      ]
    };
  },
  methods: {
    updateRadio(row,index) {
        console.log(row)
      // 将点击的列表项的 radio 值设置为 1
      // 同时将其他列表项的 radio 值设置为 2
      this.listInfo.forEach((item, i) => {
        if (i === index) {
          item.radio = 1;
        } else {
          item.radio = 2;
        }
      });
    }
  }
};
</script>

效果：