从其他vuejs laravel axios填充选择框

Question

I have two tables, SALARIE and CHANTIER, between them the relationship hasMany BelongsTTO, chantier1 (salarie1, salarie2, salarie3...), in my blade I have two selections, I want when I choose in select 1(chantier) to the the 2nd select(salaries) fill in with salaries of Chantier chosen. SalarieController

public function pointage()
{
  $chantiers = Chantier::all(); 
  return view('pointage', ['chantiers' => $chantiers]);
}

pointage.blade.php

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <div id="app">
   <div class="form-group ">
            <label>chantier:</label>
            <select class="form-control" @change="onChange">
              @foreach($chantiers as $chantier)
                <option value="{{ $chantier->id }}">{{ $chantier->nomC }} {{ $chantier->id }}</option>
              @endforeach
            </select>
    </div>

     <div class="form-group ">
            <label>salarie:</label>
            <select class="form-control" @change="onChange">
              @foreach($salaries as $salarie)
                <option value="{{ $salarie->id }}">{{ $salarie->nomS }} </option>
              @endforeach
            </select>
    </div>
</div>

vuejs code

 const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {

    }
  }
})

Route

Route::get('pointage', 'SalarieController@pointage');

Answer 1

You can define computed variable salaries and on chantiers changes make request and if done fill salaries with response data and instead of using laravel's for each use v-for="salary in salaries. Hope it help u.