How to display all regions for specific district with vue.js?

   <select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
  <option value="0">--Please select your district</option>
  <optgroup v-for='district in districts' 
          v-bind:selected="district.distirct == selected" 
          :value="district.district" label="@">
  <option v-for='d in districts' 
          v-bind:selected="d == selected" 
          :value="d">@</option>
</select>

I have this select box but problem is that i get in option all values for all regions. I need somehow display in optgroup some district and in option regions for that district and so on. Any suggestion?

In controller i have this:

 public function getDistricts(){
        $districts = Districts::select('district','order')->orderBy('order', 'asc')->groupBy('district','order')->get();
        foreach ($districts as $district) {
          $district->regions = Districts::where('district',$district->district)->pluck('region');
        }
        return response()->json(['districts'=> $districts],200);
    }

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2jPfxR8
via IFTTT