Vue js: Автоматически создавать переключатели модели l oop в соответствии с именем

Question

Я хочу создать модель для каждого переключателя с inputname в качестве name радиовхода. Я решил, что мне придется l oop массив объектов, чтобы проверить, появилось ли более одного 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>

Answer 1

Это то, чего вы пытаетесь достичь sh?

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>