Estoy tratando de crear un menú desplegable en cascada usando vue.js. Quiero configurar los datos en el segundo menú desplegable en función del elemento elegido en el primer menú desplegable. No sé cómo filtrar los datos según el elemento elegido. Intenté usar la propiedad calculada pero no tuve éxito. Necesito ayuda por favor. Gracias por adelantado.
<template> <b-container class="my-2"> <b-row> <b-col col="12" md="6" lg="3"> <b-form-group id="fieldset" :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-first" label-size="lg"> <v-select id="assetPair" @click="changeAssetClass(assetPair)" v-model="assetPair" :searchable="true" :options="assetSymbols" /> </b-form-group> </b-col> <b-col cols="12" md="6" lg="3"> <b-form-group id="fieldset-1" :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-pair" label-size="lg"> <v-select id="symbolsPair" v-model="symbolsPair" :searchable="true" :options="currencyArray" /> </b-form-group> </b-col> </b-row> </b-container> </template> export default { data() { assetPair: 'Forex', symbolsPair: '', currencyArray: [], assetsSymbols: [{ text: 'Forex', id: 1 }, { text: 'Metal', id: 2 }, { text: 'Indices', id: 3 }, ], symbolsPair: { 1: [{ text: 'AUDCAD', id: 1, }, { text: 'AUDCHF', id: 2, }, { text: 'AUDJPY', id: 3, }, ], 2: [{ text: 'XAUUSD', id: 1, }, { text: 'XAGUSD', id: 2, }, ], 3: [{ text: 'GER30Cash', id: 1, }, { text: 'US30Cash', id: 2, }, { text: 'EU50Cash', id: 3, }, ], } }, computed() { changeAssetClass(e) { return this.currencyArray.push(this.symbolsPair[e]) } } }Una observación: está actualizando la matriz de origen this.currencyArray en la primera selección desplegable. Por lo tanto, el menú desplegable en cascada no contendrá los datos filtrados.
Demostración de trabajo:
new Vue({ el: '#app', data: function() { return { assetsSymbols: [{ text: 'Forex', id: 1 }, { text: 'Metal', id: 2 }, { text: 'Indices', id: 3 } ], selectedSymbol: '', selectedSymbolPair: '', symbolsPairArr: [], symbolsPair: { 1: [{ text: 'AUDCAD', id: 1, }, { text: 'AUDCHF', id: 2, }, { text: 'AUDJPY', id: 3, }, ], 2: [{ text: 'XAUUSD', id: 1, }, { text: 'XAGUSD', id: 2, }, ], 3: [{ text: 'GER30Cash', id: 1, }, { text: 'US30Cash', id: 2, }, { text: 'EU50Cash', id: 3, }, ]} } }, watch: { selectedSymbol: function() { this.symbolsPairArr = []; if (this.selectedSymbol > 0) { this.symbolsPairArr = this.symbolsPair[this.selectedSymbol]; } } }, mounted() { this.selectedSymbol = 2; } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="cascading-dropdown"> <div class="dropdown"> <span>Symbol :</span> <select v-model="selectedSymbol"> <option value="">Select a Symbol</option> <option v-for="symbol in assetsSymbols" :value="symbol.id" :key="symbol.id">{{ symbol.text }}</option> </select> </div> <div class="dropdown"> <span>Symbol Pair:</span> <select :disabled="!selectedSymbol" v-model="selectedSymbolPair"> <option value="">Select a Pair</option> <option v-for="pair in symbolsPairArr" :value="pair.id" :key="pair.id">{{ pair.text }}</option> </select> </div> </div> </div>Nota: creé este fragmento para demostrarle cómo funcionará según sus requisitos. Puede modificarlo según la necesidad si es necesario.