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

Question

我想为每个单选按钮创建一个模型，将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>

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