Vue 2 + Laravel 5.3


I have a form with a name field and a select for provinces . The point is that I enter a name, and when I select a province, I delete what I wrote in the name. And searching and testing I get to give that if I delete the v-model of select , that does not delete the name, but I need the v-model in select .


  <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"/>


 <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>

and I have vue defined as:

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

    delimiters: ['<%', '%>']

vm.getDistricts = function (province) {

        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;
asked by Juan Pablo B 10.01.2017 в 23:00

2 answers


I recommend that you handle all your selects with the vue-multiselect library link It will take you out of many fights.

answered by 22.03.2017 в 18:09

In the options you must put: vulue="the option", since from there it will take the new value that the select will have, remember that when you pass dynamic information to the labels, you must do it through the instance vue, your foreach is as follows.

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

If you allow me to give you a recommendation. I would not mix blade with vue, since if you use the power of vue it is better to use the client's resources to render their information. Your code would replace it with.

<option v-for="provinces as province" :value="province->code" :key="provinces">
answered by 31.08.2018 в 04:50