Vue 2 + Laravel 5.3

Question

Vue 2 + Laravel 5.3

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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 .

Name:

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

Province:

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

and I have vue defined as:

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

laravel vue.js

asked by Juan Pablo B 10.01.2017 в 23:00

source

2 answers

Problem receiving data by GET on android Call angularjs function from javascript

score 1 · Answer 1

1

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

score 1 · Answer 2

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">
        {{$province->province}}
    </option>
@endforeach

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">
    {{province->province}}
</option>