'How to get selected radio button values in multiple radio button using Vuejs.?

How can I get the value from my multiple radio button. I have a product array with variants like colour and size etc...(They are getting from backend).And i want to show a validate message if user submit form without checking radio button. I want to get the selected value from a group of radio buttons.

<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>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source