<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> } } } ¿Cómo cambio las <a-select-option> cuando selecciono un botón de opción?
Puede calcular las opciones de <a-select> en función del valor de <a-radio-group> .
En lugar del controlador de eventos de change , use una directiva v-model en <a-radio-group> para almacenar la marca seleccionada y en <a-select> para almacenar el teléfono seleccionado:
<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>Agregue una propiedad calculada para que las opciones se muestren según la marca seleccionada:
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 un observador en las opciones del teléfono para seleccionar automáticamente la primera.
export default { watch: { phoneOptions(value) { this.selectedPhone = value?.[0].value }, }, }Representa las opciones del teléfono:
<a-select-option v-for="opt in phoneOptions" :key="opt.value" :value="opt.value"> {{ opt.label }} </a-select-option>