Tengo 2 menús desplegables, el segundo cambia de valor según la selección del primer menú desplegable.
Todo lo que quiero hacer es configurar el primer valor del segundo menú desplegable para que se seleccione de forma predeterminada sin importar cuál sea la opción en el primer menú desplegable.
Por el momento, la selección predeterminada del segundo menú desplegable siempre está vacía.
Intenté obtener los valores de los types y cargarlos a través v-for en la etiqueta de option y configurar :selected="index===0" pero tampoco funcionó.
Demostración: https://codesandbox.io/s/relaxed-flower-2hjox1?file=/src/App.vue
La plantilla
<div class="col-md-6"> <label for="type" class="form-label">Type</label> <select id="type" class="form-select" v-model="form.type"> <option value="en-US" selected>English (US)</option> <option value="en-GB">English (British)</option> </select> </div> <div class="col-md-6"> <label for="selected" class="form-label">Option 2</label> <div v-if="form.type === 'en-GB'"> <select id="selected" name="selected" class="form-select" v-model="form.selected"> <option value="Arsenal">Arsenal</option> <option value="Chelsea">Chelsea</option> <option value="Liverpool">Liverpool</option> </select> </div> <div v-else-if="form.type === 'en-US'"> <select id="selected" name="selected" class="form-select" v-model="form.selected"> <option value="Lakers">Lakers</option> <option value="Bulls">Bulls</option> <option value="Mavericks">Mavericks</option> </select> </div> </div>JavaScript
export default { name: "App", data() { return { form: { type: 'en-GB', selected: '' }, types: { american: ['Lakers', 'Bulls', 'Mavericks'], british: ['Arsenal', 'Liverpool', 'Chelsea'] } } }, }; const app = Vue.createApp({ data() { return { form: { type: "en-GB", selected: "", }, types: { american: ["Lakers", "Bulls", "Mavericks"], british: ["Arsenal", "Liverpool", "Chelsea"], }, }; }, watch: { 'form.type': { handler() { this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0] }, immediate: true } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="col-md-6"> <label for="type" class="form-label">Type</label> <select id="type" class="form-select" v-model="form.type"> <option value="en-US" selected>English (US)</option> <option value="en-GB">English (British)</option> </select> </div> <div class="col-md-6"> <label for="selected" class="form-label">Option 2</label> <div v-if="form.type === 'en-GB'"> <select id="selected" name="selected" class="form-select" v-model="form.selected" > <option value="Arsenal">Arsenal</option> <option value="Chelsea">Chelsea</option> <option value="Liverpool">Liverpool</option> </select> </div> <div v-else-if="form.type === 'en-US'"> <select id="selected" name="selected" class="form-select" v-model="form.selected" > <option value="Lakers">Lakers</option> <option value="Bulls">Bulls</option> <option value="Mavericks">Mavericks</option> </select> </div> </div> </div>Puede crear un observador y establecer valores predeterminados para la segunda selección:
watch: { 'form.type': { handler() { this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0] }, immediate: true } }Todo lo que quiero hacer es configurar el primer valor del segundo menú desplegable para que se seleccione de forma predeterminada sin importar cuál sea la opción en el primer menú desplegable.
Agregue un observador, que observa form.type , luego elija el primer elemento de los types
Tenga en cuenta que cambié la clave american a la clave que está usando para el type , luego puede recorrer las opciones, si no tiene eso en su lugar, necesitará el objeto de mapeo de todos modos typeMap: {'en-US': 'american', 'en-GB': 'british' } ... types[typeMap[form.type]]
new Vue({ el: '#app', data() { return { form: { type: 'en-GB', selected: '' }, types: { 'en-US': ['Lakers', 'Bulls', 'Mavericks'], 'en-GB': ['Arsenal', 'Liverpool', 'Chelsea'] } } }, watch: { 'form.type' () { this.form.selected = this.types[this.form.type][0] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script> <div id="app"> <div class="col-md-6"> <label for="type" class="form-label">Type</label> <select id="type" class="form-select" v-model="form.type"> <option value="en-US" selected>English (US)</option> <option value="en-GB">English (British)</option> </select> </div> <div class="col-md-6"> <label for="selected" class="form-label">Option 2</label> <select id="selected" name="selected" class="form-select" v-model="form.selected"> <option v-for="name in types[form.type]">{{ name }}</option> </select> </div> </div>