Me gustaría mostrar/ocultar ciertas opciones en el menú de selección 2 según lo que se elija en el menú de selección 1 y también mostrar/ocultar ciertas opciones en el menú de selección 3 según lo que se elija en el menú de selección 2.
Por ejemplo, si el usuario selecciona 'Asunto01' en el primer menú, me gustaría ocultar 'Asunto04' y 'Asunto08' en el menú 2. Si el usuario selecciona 'Asunto016' en el menú 2, me gustaría ocultar 'Asunto11' en menú 3. Tengo varios escenarios basados en las selecciones de sujetos. Así que estos son solo ejemplos.
Puedo agregar una clase a pero no sé cómo agregar etiquetas individuales.
Cualquier ayuda apreciada.
El código:
<template> <select v-model="one" id="selectone"> <option v-for="subject in subjects" :key="subject"> {{ subject }} </option> </select> <select v-model="two" :disabled="!one" id="selecttwo"> <option v-for="subject in subjects.filter((item) => item.split(' ')[0].indexOf(this.one.split(' ')[0]) )" :key="subject" > {{ subject }} </option> </select> <select v-model="three" :disabled="!two" id="selectthree"> <option v-for="subject in subjects.filter( (item) => item.split(' ')[0].indexOf(this.one.split(' ')[0]) && item.split(' ')[0].indexOf(this.two.split(' ')[0]) )" :key="subject" > {{ subject }} </option> </select> <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div> </template> <script> export default { data() { return { subjects: [ "Subject01", "Subject02", "Subject03", "Subject04", "Subject05", "Subject06", "Subject07", "Subject08", "Subject09", "Subject10", "Subject11", "Subject12", "Subject13", "Subject14", "Subject15", "Subject16", ], one: "", two: "", three: "", }; }, methods: {}, }; </script> <style> li { list-style-type: none; } .hide { display: none; } .show { display: block; } </style>Tenga propiedades de computadora separadas como fuente para las opciones de selección 2 y 3 y reprodúzcalas en bucles.
Cuando cambie el valor de la primera opción seleccionada, estas propiedades de la computadora se actualizarán automáticamente.
Asegúrese de usar :key, de lo contrario, el orden de las opciones de representación puede ser inconsistente.
Como dijo @wittgenstein, puede usar una propiedad calculada:
new Vue({ el: '#app', data() { return { subjects: [ "Subject01", "Subject02", "Subject03", "Subject04", "Subject05", "Subject06", "Subject07", "Subject08", "Subject09", "Subject10", "Subject11", "Subject12", "Subject13", "Subject14", "Subject15", "Subject16", ], one: "", two: "", three: "", }; }, computed: { select1() { return this.subjects }, select2() { if (this.one === 'Subject01') { return this.subjects.filter(subject => !['Subject04', 'Subject08'].includes(subject)) } return this.subjects }, select3() { if (this.two === 'Subject16') { return this.subjects.filter(subject => subject !== 'Subject04') } return this.subjects }, }, methods: {}, }); li { list-style-type: none; } .hide { display: none; } .show { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select v-model="one" id="selectone"> <option v-for="subject in select1" :key="subject"> {{ subject }} </option> </select> <select v-model="two" :disabled="!one" id="selecttwo"> <option v-for="subject in select2" :key="subject" > {{ subject }} </option> </select> <select v-model="three" :disabled="!two" id="selectthree"> <option v-for="subject in select3" :key="subject" > {{ subject }} </option> </select> <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div> </div>Puede crear objetos en propiedad de datos con casos coincidentes para mostrar elementos y luego usar propiedades calculadas:
new Vue({ el: "#demo", data() { return { subjects: ["Subject01", "Subject02", "Subject03", "Subject04", "Subject05", "Subject06", "Subject07", "Subject08", "Subject09", "Subject10", "Subject11", "Subject12", "Subject13", "Subject14", "Subject15", "Subject16",], disOne: {"Subject01":["Subject04", "Subject08"]}, // you can set here other cases for example for some other subject dont show array of other subjects disTwo: {"Subject16":["Subject11"]}, one: "", two: "", three: "", } }, computed: { sub2() { if (this.one) { return this.subjects.filter(s => !this.disOne[this.one].includes(s)) } }, sub3() { if (this.two) { return this.subjects.filter(s => !this.disTwo[this.two].includes(s)) } } }, methods: {}, }) li { list-style-type: none; } .hide { display: none; } .show { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <select v-model="one" id="selectone"> <option v-for="subject in subjects" :key="subject"> {{ subject }} </option> </select> <select v-model="two" :disabled="!one" id="selecttwo"> <option v-for="subject in sub2" :key="subject" > {{ subject }} </option> </select> <select v-model="three" :disabled="!two" id="selectthree"> <option v-for="subject in sub3" :key="subject" > {{ subject }} </option> </select> <div v-if="one">You have selected: {{ one }} {{ two }} {{ three }}</div> </div>