samedi 17 septembre 2016

Passing data from Vue.js request to Laravel 5.3 form

I have two tables: Countries and Cities. Idea is to show the second dropdown when User has selected country and fill it with cities that correspond to selected country.

Unfortunately I cannot figure out how to pass retrieved values to form.

Values retrieved are below the country with id 21 is Norway :)

Selected { "country": "21", "CountrySelected": true, "cities": { "6": "Oslo", "11": "Lillehammer" } }

// My app.js

const app = new Vue({


el: '#events',

  data: {
                country:'',
                CountrySelected: false, 
                cities:[],      
  },

  methods: {

                WhenCountryHasBeenSelected: function(event) {
                        this.getCities();
                        this.CountrySelected= true;
                },

                getCities: function(){
                        this.$http.get('api/cities/'+this.country).then(function (response) {
      this.cities = response.data;
      });
   }
  },

})
//My api.php routes

Route::get('/cities/{country_id}', function (Request $request, $country_id) {
                
$cities=App\City::where('country_id', $country_id)->get()->pluck('name','id');

return $cities;
});


//My blade file

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
        <div id="events">
            <div class="panel panel-default">
                <div class="panel-heading">Select cities by country</div>

                <div class="panel-body">


                    {!! Form::open() !!}


                    {!! Form::select('country', $countries, null,  ['v-model'=>'country', '@change'=>'WhenCountryHasBeenSelected' ,'class'=>'form-control']) !!}
                 
                    <div v-show="CountrySelected">
                    {!! Form::select('city',$cities, null, ['class'=>'form-control']) !!}
                    {!! Form::close() !!}

                   
                    Selected @
                
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
@endsection


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire