uniapp label radio 多行单选

<template>
  <view>
    <block v-for="item in form" :key="item.id">
      <view class="option">
        <block v-for="option in item.options" :key="option.id">
          <label :for="item.name + option.id">
            <text
              :class="{
                active: option.checked,
              }"
              >{{ option.value }}</text
            >
          </label>
        </block>
      </view>

      <radio-group @change="onChange($event, item.name)" style="display: none">
        <block v-for="option in item.options" :key="option.id">
          <radio :id="item.name + option.id" :value="option.value"></radio>
        </block>
      </radio-group>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: [
        {
          id: 1,
          name: "option1",
          options: [
            {
              id: 1,
              value: "JavaScript",
              checked: false,
            },
            {
              id: 2,
              value: "Python",
              checked: false,
            },
            {
              id: 3,
              value: "Java",
              checked: false,
            },
          ],
          selected: "",
        },
        {
          id: 2,
          name: "option2",
          options: [
            {
              id: 1,
              value: "C/C++",
              checked: false,
            },
            {
              id: 2,
              value: "Go",
              checked: false,
            },
            {
              id: 3,
              value: "Dart",
              checked: false,
            },
          ],
          selected: "",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    onChange(e, name) {
      let value = e.detail.value;
      for (const index in this.form) {
        const element = this.form[index];
        if (element.name === name) {
          for (const index2 in element.options) {
            const element2 = element.options[index2];
            if (element2.value === value) {
              element2.checked = true;
              element.selected = element2.value;
            } else {
              element2.checked = false;
            }
          }
          break;
        }
      }
      console.log(this.form);
    },
  },
};
</script>

<style>
.option {
  width: 500rpx;
  display: flex;
  justify-content: space-evenly;
}

.active {
  background-color: red;
}
</style>