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

Question

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>

Your radio buttons lack a v-model The :value binding should be left as is. — IVO GELOV
– IVO GELOV, Commented Feb 28, 2022 at 8:10

Nikola Pavicevic · Accepted Answer · 2022-02-28 09:21:29Z

Mybe something like following snippet:

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related