storevisit-ui-mobile/src/components/zRadio2.vue

<template>
  <div class="zSelect">
    <div class="checkbox">
      <van-radio-group v-model="zradioc" @change="radiofn">
        <van-radio :name="item.customOptionId+''" @click="radioclick" v-for="(item,index) in zRadiocolumns" :key="index">{{item.customOption}}</van-radio>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "zSelect",
  props: {
    radio: "",
    textc: "",
    zRadiocolumns: [],
    answerType: "",
    collectionType: ""
  },
  data() {
    return {
      radioChange: false,
      zradioc: this.radio
    }
  },
  methods: {
    radiofn(value) {
      this.radioChange = true;
      var typeval =[...this.zRadiocolumns]
      for (var k = 0; k < this.zRadiocolumns.length; k++) {
        typeval[k].value="N"
        if (this.zRadiocolumns[k].customOptionId == value) {
          typeval[k].value="Y"
        }
      }
      let datalist = {
        id: this.textc,
        value: typeval
      }
      this.$emit('zSelectVal', datalist);
    },
    radioclick() {
      if (!this.radioChange) {
        this.zradioc = ""
      }
      this.radioChange = false
    },
  }
}
</script>

<style scoped>
.van-f-red {
  color: red;
  width: 4px;
  display: inline-block
}

.zSelect .z-cell {
  padding: 10px 16px 0 16px;
  font-size: 16px;
}

.checkbox .van-radio {
  padding-bottom: 10px
}
</style>
<style>
.checkbox .van-radio__icon {
  border: 1px solid #333;
  border-radius: 80px;
  width: 1em
}

.checkbox .van-radio__icon .van-icon {
  border: 0 !important;
  height: 1em;
  width: 1em;
}

.checkbox .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: #fff;
  display: block;
  height: 14px;
  width: 14px;
  margin: 2px auto;
  background-color: #1989fa;
  color: transparent;
}

.checkbox .van-radio__icon--checked {
  border: 1px solid #1989fa;
}
</style>