I am attempting to generate a model for each radio button using the inputname as the identifier. My approach involves looping through the array of objects to identify instances where more than one inputname is present, and then converting this value into an object property for the models. However, I am encountering difficulties in executing these steps.
<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>