2

Tengo un formulario con un campo nombre y un select para provincias. La cuestión es que ingreso un nombre, y cuando selecciono una provincia, se me borra lo que escribí en el nombre. Y buscando y probando llegue a dar que si borro el v-model del select, ahí no se borra el nombre, pero necesito del v-model en el select.

Nombre:

  <label for="first_name">Nombre</label>
  <input type="text" id="first_name" name="first_name" value="{{old('first_name')}}"  class="form-control" placeholder="-" autocomplete="off"  maxlength="255"/>

Provincia:

 <label for="province">Provincia</label>
       <select name="province" id="province" class="form-control" v-model="province" v-on:change="getDistricts(province)">
             <option value="" hidden>-- Seleccionar --</option>    
             @foreach($provinces as $province)
                <option value="{{$province->code}}" {{ (Input::old('province') == $province->code ? "selected" : "") }}> {{$province->province}}</option>
             @endforeach                                
      </select>

y tengo vue definido como:

var vm = new Vue({
    el: '#finaldraw',
    data: {
        province: '1',
        m_district: '',
        districts: [],
        places: []
    },

    delimiters: ['<%', '%>']
});

vm.getDistricts = function (province) {

    $.ajax({
        url: '/geoDistricts/getDistricts',
        method: 'POST',
        dataType: 'json',
        data: {province: province},
        beforeSend: function () {
            $(".spinner-select i.province").css('display', 'inline-block');
            $("#district").prop('disabled', true);
            $("#place").prop('disabled', true);
        },
        complete: function () {
            $(".spinner-select i.province").css('display', 'none');
        },
        success: function (data) {
            $("#district").prop('disabled', false);
          //  vm.districts = data;
        }
    });
};

2 respuestas 2

2

Te recomiendo que manejes todos tus selects con la librería vue-multiselect https://github.com/shentao/vue-multiselect Te sacara de muchas broncas.

9
  • 1
    Te recomiendo editar tu respuesta, siguiendo esta guía: ¿Cómo escribo una buena respuesta?. Saludos. Commented el 22 mar. 2017 a las 17:30
  • @MauricioAriasOlave no entiendo en que esta mal?. Commented el 22 mar. 2017 a las 18:03
  • 1
    Gerardo, es cierto que no conozco vue.js, pero estás confundido, mis comentarios apuntan a que mejores la redacción de tu respuesta. En ningún momento he dicho que tu respuesta sea incorrecta. siento el malentendido. Commented el 22 mar. 2017 a las 18:19
  • 1
    lo siento entendí mal tu comentario. tratare de mejorar mi redacción. saludos Commented el 22 mar. 2017 a las 18:22
  • 1
    Enlace roto y respuesta sin detalles. Esto es lo que pasa cuando sólo colocan enlaces, por eso el buen @MauricioAriasOlave te decía sobre el funcionamiento del sitio. Saludos :D
    – fredyfx
    Commented el 16 feb. 2018 a las 17:15
2

En las opciones debes de poner :vulue="la opcion", dado que de ahí tomara el nuevo valor que tendrá el select, recuerda que cuando le pasas información dinámica a las etiquetas lo debes de hacer mediante la instancia vue, tu foreach queda de la siguiente forma.

@foreach($provinces as $province)
    <option :value="$province->code">
        {{$province->province}}
    </option>
@endforeach   

Si me permites darte una recomendación. Yo no mezclaría blade con vue, dado que si utilizas el poder de vue es mejor utilizar los recursos del cliente para renderizar su información. Tu código lo sustituiría por.

<option v-for="provinces as province" :value="province->code" :key="provinces">
    {{province->province}}
</option>

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.