Vue js：根据名称自动创建模型循环单选按钮答案

【问题标题】：Vue js: Automatically create model loop radio buttons according to nameVue js：根据名称自动创建模型循环单选按钮
【发布时间】：2020-08-22 01:47:29
【问题描述】：

我想为每个单选按钮创建一个模型，其中inputname 作为单选输入的name。我想我必须循环对象数组以检查是否出现了多个inputname，然后将此inputname 转换为模型的对象属性。但我似乎无法做到这两点。

<script>
export default {
    data(){
      return{
      options: [
        {
          name: 'Radio2',
          price: '100',
          inputname: 'rady',
          option_type: 'radio'
        },
        {
          name: 'Radio1',
          price: '50',
          inputname: 'rady',
          option_type: 'radio'
        },
        {
          name: 'Radio2',
          price: '50',
          inputname: 'brady',
          option_type: 'radio'
        },
        {
          name: 'Radio1',
          price: '50',
          inputname: 'brady',
          option_type: 'radio'
        },

      ],
      radioButtons: []
      }
    },
    created(){
    
     var valueArr = this.options.map(function(item){ 
      this.radioButtons.push({ value: ''+ item.inputname +'' });
        //return item.inputname 
        });
      console.log(valueArr)
      console.log(this.radioButtons)
 
    
    
    }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
        <div v-if="option.option_type == 'radio'">

          <b-form-radio v-model="radioButtons"  :name="option.inputname" :value="option">
            {{option.name}}--- {{option.price}}
          </b-form-radio>

        </div>

</div>

</template>

【问题讨论】：

删除问题
为什么？我还在寻找答案..
因为之前您曾评论说“现在已修复”
我正在回复某人的评论，即我没有返回数据。在处理此处的代码时，我忘记添加 return{}，但我仍在寻找答案。

标签： javascript arrays vue.js object vuejs2

【解决方案1】：

这是你想要完成的吗？

new Vue({
  el: '#app',

  data(){
    return{
      options: [
        {
          name: 'Radio2',
          price: '100',
          inputname: 'rady',
          option_type: 'radio'
        },
        {
          name: 'Radio1',
          price: '50',
          inputname: 'rady',
          option_type: 'radio'
        },
        {
          name: 'Radio2',
          price: '50',
          inputname: 'brady',
          option_type: 'radio'
        },
        {
          name: 'Radio1',
          price: '60',
          inputname: 'brady',
          option_type: 'radio'
        },
      ],
      
      selected: {},
    }
  },

  computed: {
    radioGroups() {
      const obj = {};
      
      this.options.forEach(option => {
        if (option.option_type === 'radio') {
          if (!obj[option.inputname]) {
            obj[option.inputname] = [];
          }
          
          obj[option.inputname].push({name: option.name, value: option.price})
        }
      })
      
      return Object.entries(obj).map(([key, value]) => {
        return {
          label: key,
          items: value,
        }
      })
    }
  },
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id='app'>
  <b-form-group v-for="radioGroup in radioGroups" :label="radioGroup.label">
    <b-form-radio v-for="item in radioGroup.items" v-model="selected[radioGroup.label]" :name="radioGroup.label + item.name" :value="item.value">
     {{ item.name }} - {{ item.value }}
    </b-form-radio>
  </b-form-group>
  
  {{ selected }}
</div>

【讨论】：

非常感谢！