VueJS Input Binding for dynamic radio buttons-CodePudding

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

CodePudding user response：

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>