Raido
208
5
Vue

Passing data from Vue.js request to Laravel 5.3 form

Posted 2 years ago by Raido

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. Not enough coffee or sleep I guess :)

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: {id:'', name:''}, // Thank you bashy! },

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

Select cities by country
            <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 @{{ $data | json }}
            
            </div>
        </div>
    </div>
    </div>
</div>
@endsection'''

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.