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;
}
});
};