VueJS Input Binding for dynamic radio buttons

Question

I am trying to render several radio buttons with dynamic data. Users can create markets and then products and unlock these products for each market and give more properties. Among other things, radio buttons should be available for this purpose. I've tried:

          <div v-for="market in markets" :key="market.id">
              <div>
                <span>{{ market.name }}</span>               
              </div>              
              <div>
                <div v-for="(field, index) in market.market_fields" :key="index">
                  <label :for="field.name">{{field.label}}</label>
                  <div v-if="field.type != 'radio'"><input :type="field.type" v-model="field.value"></div>
                  <div>
                    <input type="radio" :name="field.name" :value="true" v-model="field.value">
                    <label :for="field.name">ja</label><br>
                    <input type="radio" :name="field.name" :value="false" v-model="field.value">
                    <label :for="field.name">nein</label><br>
                  </div>
                </div>                
              </div>                
            </div>

The problem seems to be with the v-model because the selection of a radio button is only ever for one market. for example: I click a radio button for market1, then the radio button is checked, but if I select the same radio button for market2, it is no longer checked for market1.

EDIT: For every market the radio buttons had the same name attribute (field.name). So i changed it to market.name_field_name

Nikola Pavicevic · Accepted Answer · 2022-12-05 17:08:11Z

1

Try to add index to input id :id="field.name + index":

const { ref } = Vue
const app = Vue.createApp({
  data() {
    const markets = ref(
      [{market_fields: [{id:1, name:'market1', label: 'aaa', value: '', type: 'radio'}, {id:2, name:'market1', label: 'bbb', value: '', type: 'radio'}, {id:3, name:'market2', label: 'ccc', value: '', type: 'radio'}]}]
    )
    return {
      markets
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="market in markets" :key="market.id">
  <div>
    <span>{{ market.name }}</span>               
  </div>              
  <div>
    <div v-for="(field, index) in market.market_fields" :key="index">
      <label :for="field.name">{{field.label}}</label>
      <div v-if="field.type != 'radio'">
        <input :type="field.type" v-model="field.value">
      </div>
      <div>
        <input type="radio" :id="field.name + index + 'ja'" :value="true" v-model="field.value">
        <label :for="field.name + index + 'ja'">ja</label><br>
        <input type="radio" :id="field.name + index + 'nein'" :value="false" v-model="field.value">
        <label :for="field.name + index + 'nein'">nein</label><br>
      </div>
    </div>                
  </div>                
</div>
{{ markets }}
</div>

edited Dec 5, 2022 at 17:08

answered Dec 5, 2022 at 17:00

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vlad Over a year ago

Thanks for your answer. Seems to be a solution. In my case i figured out what the problem was: For every market the radio buttons had the same name attribute (field.name). So i changed it to: market.name_field.name and it works

Collectives™ on Stack Overflow

VueJS Input Binding for dynamic radio buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related