动态单选按钮的 VueJS 输入绑定答案

【问题标题】：VueJS Input Binding for dynamic radio buttons动态单选按钮的 VueJS 输入绑定
【发布时间】：2022-12-06 01:13:01
【问题描述】：

我正在尝试使用动态数据呈现几个单选按钮。用户可以创建市场，然后创建产品并为每个市场解锁这些产品并提供更多属性。除其他事项外，单选按钮应该可用于此目的。我试过了：

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

问题似乎出在 v 模型上，因为单选按钮的选择只适用于一个市场。例如：我单击市场 1 的单选按钮，然后选中该单选按钮，但如果我为市场 2 选择相同的单选按钮，则不再选中市场 1。

【问题讨论】：

标签： vue.js v-for

【解决方案1】：

尝试为输入名称添加索引:name="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" :name="field.name + index" :value="true" v-model="field.value">
        <label :for="field.name">ja</label><br>
        <input type="radio" :name="field.name + index" :value="false" v-model="field.value">
        <label :for="field.name">nein</label><br>
      </div>
    </div>                
  </div>                
</div>
{{ markets }}
</div>

【讨论】：