Estoy aprendiendo vue js y estoy probando un grupo de entrada condicional con vue js. Tengo 2 botones de opción y 1 selección desplegable. Lo que quiero es que cuando se seleccione Radio 1, el menú desplegable esté habilitado. y cuando se selecciona Radio 2, el menú desplegable se desactiva. He creado el código como se muestra a continuación. ¿Alguien puede ayudarme?
new Vue({
el: '#app',
data: {
radioTypes: [
{
name:'Type 1',
value:60
},
{
name:'Type 2',
value:70
}
],
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<div id="app">
<div v-for="data in radioTypes" v-bind:key="data.name">
<input type="radio" v-model="radioVal" name="storage-type" :id="'storage'+data.name.toLowerCase()" :value="data.name">
<label :for="'storage-'+data.name.toLowerCase()">{{data.name}}</label>
</div>
<div>
<select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
------------------------------------
No es necesario crear una propiedad calculada, simplemente puede verificarla así.
new Vue({
el: '#app',
data: {
radioVal: '',
}
});
<div id="app">
<input type="radio" v-model="radioVal" name="radioType" value="one">
<label for="Radio1">Radio 1</label>
<input type="radio" v-model="radioVal" name="radioType" value="two">
<label for="Radio1">Radio 2</label>
<div>
<!-- Disable the select when radioVal value is two -->
<select id="inputGroupSelect01" :disabled="radioVal === 'two'">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
3
1
Edité el fragmento en la publicación anterior. ¿Qué pasa si tengo una radio de tipo dinámico? ¿Cómo se desactiva según el tipo de radio cuando se selecciona el Tipo 2?
-fráncfort
29 de marzo de 2021 a las 3:25
1
No deberías marcar radioType :disabled="radioTypes.name === 'Type 2'" pero radioVal para deshabilitar el botón de radio, ya que en radioVal se va a modificar el valor. :disabled="radioVal ==='Tipo 2'".
- Mohib Arshi
29 de marzo de 2021 a las 4:49
1
oh sí, lo entiendo
-fráncfort
29 de marzo de 2021 a las 5:04
------------------------------------
Además de la otra respuesta, probablemente valga la pena señalar que lo ideal es que un cálculo sea puro y no tenga lo que se llama "efectos secundarios".Antiguo Testamento;. Básicamente, eso significa que un cálculo no debe cambiar otras variables, sino devolver algo basado en otras variables (de ahí el nombre "calculado"). Entonces, así:
radioEnable(){
return this.radioVal === 'one';
}
Pero como se indicó, ni siquiera necesitas el cálculo aquí.
