1

Espero alguien me pueda orientar con mi problema.

Tengo un Select y mi intención es que cuando cambie a cierto valor, una casilla de texto se habilite o desabilite según sea el caso.

¿Cómo lo puedo hacer con Vuejs ?

Antes lo hacia con Jquery y era así: (En este ejemplo cuando seleccionas del Select al país Mexico se habilitan los inputs de los contrario se vuelven a desabilitar)

$(document).ready( function(){

//Al cargar la página se debilitan los inputs
$('#estado').attr('disabled', true);
$('#ciudad').attr('disabled', true);

//Sí el usuario selecciona el país Mexico se habilitan los inputs
$('#pais').on('change', function(){
        var conf = $('#pais').val();
        if (conf === "México") {
            $('#estado').removeAttr('disabled');
            $('#ciudad').removeAttr('disabled');
        }else {
            $('#estado').attr('disabled', true);
            $('#ciudad').attr('disabled', true);
            $('#estado').val('');
            $('#ciudad').val('');
        }
});

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container pt-5">

<div class="col-md-6">
  <div class="form-group">
    <select name="pais" id="pais" class="form-control" required>
      <option value="" selected>Seleccione...</option>
      <option value="México">México</option>
      <option value="España">España</option>
      <option value="Colombia">Colombia</option>
      <option value="Venezuela">Venezuela</option>
      <option value="Perú">Perú</option>
    </select>
  </div>
</div>

<div class="col-md-3">
  <div class="form-group">
    <label>Estado:</label>
    <input type="text" name="estado" id="estado" class="form-control">
  </div>
</div>

<div class="col-md-3">
  <div class="form-group">
    <label>Ciudad:</label>
    <input type="text" name="ciudad" id="ciudad" class="form-control">
  </div>
</div>

</div>

2
  • Si nos compartes el codigo del componente donde tienes el select podremos ayudarte más facilmente. Commented el 22 mar. 2019 a las 14:33
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el recorrido de bienvenida para entender mejor como funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    Commented el 22 mar. 2019 a las 14:47

1 respuesta 1

3

En vue, seria exactamente lo mismo. Asignas a tu select que ejecute una funcion cuando ocurra el evento onChange, y luego habilitas o deshabilitas una propiedad de tu data para que apague o prenda el textbox

<select name="pais" id="pais" class="form-control" @change="onChange()" required>

Y tu textbox deberia tener

<input type="text" name="ciudad" id="ciudad" :disabled="habilitado == 1" class="form-control">

Y en tu control deberias tener:

data: {
    habilitado : 0
},
methods: {
    onChange() {
        if (lo que necesites) {
            this.habilitado = 1
        } else {
            this.habilitado = 0
        }
    }
}

Ademas, tu select tambien deberia estar bindeado a una propiedad del data, para poder rescatar el valor que tomo.

2
  • Como obtengo el valor selecionado?
    – mariovials
    Commented el 17 may. 2022 a las 20:32
  • @mariovials de que? si tenes otra pregunta, hacela..
    – gbianchi
    Commented el 18 may. 2022 a las 13:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.