如何使用 Vuejs 在多个单选按钮中获取选定的单选按钮值？

如何从我的多个单选按钮中获取值。我有一个产品数组，其中包含颜色和大小等变体......（它们来自后端）。如果用户提交表单而不检查单选按钮，我想显示一条验证消息。我想从一组单选按钮中获取选定的值。

<form @submit.prevent="submit">
  <div v-for="(variants, index) in product_details" :key="index">
    <p>
      <b>{{ variants.title }}</b> -
    </p>
    <div
      class="input-group mt-2 increasenumber"
    >
      <div
        class="optionalitem"
        v-for="(detail, index1) in variants.details"
        :key="index1 + variants.title"
      >
        <input
          type="radio"
          :name="variants.title"
          :id="index + '_' + index1"
          class="newoneche"
          :value="detail.value"
        />
        <label :for="index + '_' + index1" class="select01"
          ><p class="highlight">
            {{ detail.name }}
          </p>
        </label>
      </div>
    </div>
  </div>

  <button color="success">Submit</button>
</form>

script

<script>
export default {
  data() {
    return {
      product_details: [
        {
          title: "Choose Colour",
          details: [
            {
              name: "Red",
              value: "red",
            },
            {
              name: "Green",
              value: "green",
            },
            {
              name: "Yellow",
              value: "yellow",
            },
          ],
        },
        {
          title: "Choose Size",
          details: [
            {
              name: "Small",
              value: "small",
            },
            {
              name: "Large",
              value: "lage",
            },
          ],
        },
      ],
    };
  },
</script>

v-model您的单选按钮缺少一个:value绑定应该保持原样。

解决方案

new Vue({
  el:"#demo",
  data() {
    return {
      product_details: [{title: "Color", details: [{name: "Red", value: "red",}, {name: "Green", value: "green",}, {name: "Yellow", value: "yellow",},],}, {title: "Size", details: [{name: "Small", value: "small",},{name: "Large", value: "large",},],},],
      products: [{name: 'Product 1', Color: 'red', Size: 'large'}, {name: 'Product 2', Color: 'green', Size: 'small'}]
    }
  }
})

.cont, .optionalitem, .input-group { display: flex; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(product, i) in products" :key="i">
    <h3>{{ product.name }}</h3>
    <form @submit.prevent="submit">
      <div v-for="(variants, index) in product_details" :key="index" class="cont">
        <p><b>Choose {{ variants.title }}</b> - </p>
        <div class="input-group mt-2 increasenumber">
          <div
            class="optionalitem"
            v-for="(detail, index1) in variants.details"
            :key="index1 + variants.title"
          >
            <input
              type="radio"
              :id="index + '_' + index1"
              class="newoneche"
              :value="detail.value"
              v-model="products[i][variants.title]"
            />
            <label :for="index + '_' + index1" class="select01">
              <p class="highlight">
                {{ detail.name }}
              </p>
            </label>
          </div>
        </div>
      </div>
      {{product}}
      <button color="success">Submit</button>
    </form>
  </div>
</div>