<a-radio-group @change="changeName" v-decorator="[ 'name', { initialValue: 'light' }, ]" > <a-radio value="iphone">Iphone</a-radio> <a-radio value="samsung">Samsung</a-radio> </a-radio-group> <a-form-item label="Value" :colon="false"> <a-select placeholder="Select a value"> <a-select-option></a-select-option> </a-select> </a-form-item>
methods: { changeName(event) { var value = event.target.value; if (value == 'iphone') { // I want to assign the select-option the value : //<a-select-option value="ip12">Iphone 12</a-select-option> // <a-select-option value="ip13">Iphone 13</a-select-option> } else { //<a-select-option value="ss10">Samsung note 10</a-select-option> // <a-select-option value="ss9">Samsung note 9</a-select-option> } } }
How do I change the <a-select-option>
s when I select a radio button?
Advertisement
Answer
You can compute the <a-select>
‘s options based on the <a-radio-group>
‘s value.
Instead of the
change
-event handler, use av-model
directive on the<a-radio-group>
to store the selected brand, and on the<a-select>
to store the selected phone:<template> <a-radio-group v-model="selectedBrand"> <!-- brands --> </a-radio-group> <a-select placeholder="Select a value" v-model="selectedPhone"> <!-- phone options --> </a-select> </template> <script> export default { data () { return { selectedBrand: '', selectedPhone: '', } } } </script>
Add a computed property for the options to show based on the selected brand:
const PHONE_OPTIONS = { iphone: [ { value: 'iph12', label: 'Iphone 12' }, { value: 'iph13', label: 'Iphone 13' }, ], samsung: [ { value: 'ss10', label: 'Samsung Note 10' }, { value: 'ss9', label: 'Samsung Note 9' }, ], } export default { computed: { phoneOptions() { return PHONE_OPTIONS[this.selectedBrand] }, }, }
Use a watcher on the phone options to automatically select the first one.
export default { watch: { phoneOptions(value) { this.selectedPhone = value?.[0].value }, }, }
Render the phone options:
<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value"> {{ opt.label }} </a-select-option>