JavaScript
x
18
18
1
<a-radio-group
2
@change="changeName"
3
v-decorator="[
4
'name',
5
{ initialValue: 'light' },
6
]"
7
>
8
<a-radio value="iphone">Iphone</a-radio>
9
<a-radio value="samsung">Samsung</a-radio>
10
</a-radio-group>
11
12
13
<a-form-item label="Value" :colon="false">
14
<a-select placeholder="Select a value">
15
<a-select-option></a-select-option>
16
</a-select>
17
</a-form-item>
18
JavaScript
1
14
14
1
methods: {
2
changeName(event) {
3
var value = event.target.value;
4
if (value == 'iphone') {
5
// I want to assign the select-option the value :
6
//<a-select-option value="ip12">Iphone 12</a-select-option>
7
// <a-select-option value="ip13">Iphone 13</a-select-option>
8
} else {
9
//<a-select-option value="ss10">Samsung note 10</a-select-option>
10
// <a-select-option value="ss9">Samsung note 9</a-select-option>
11
}
12
}
13
}
14
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:JavaScript121211<template>
2<a-radio-group v-model="selectedBrand">
3<!-- brands -->
4</a-radio-group>
5
6<a-select placeholder="Select a value" v-model="selectedPhone">
7<!-- phone options -->
8</a-select>
9</template>
10
11<script>
12export default {
13data () {
14return {
15selectedBrand: '',
16selectedPhone: '',
17}
18}
19}
20</script>
21
Add a computed property for the options to show based on the selected brand:
JavaScript119191const PHONE_OPTIONS = {
2iphone: [
3{ value: 'iph12', label: 'Iphone 12' },
4{ value: 'iph13', label: 'Iphone 13' },
5],
6samsung: [
7{ value: 'ss10', label: 'Samsung Note 10' },
8{ value: 'ss9', label: 'Samsung Note 9' },
9],
10}
11
12export default {
13computed: {
14phoneOptions() {
15return PHONE_OPTIONS[this.selectedBrand]
16},
17},
18}
19
Use a watcher on the phone options to automatically select the first one.
JavaScript181export default {
2watch: {
3phoneOptions(value) {
4this.selectedPhone = value?.[0].value
5},
6},
7}
8
Render the phone options:
JavaScript141<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value">
2{{ opt.label }}
3</a-select-option>
4