Vue Laravel Dynamic Dependent Dropdown

Question

I am trying to get the Decoration types according to the house area types. I got the house area types but failed to get the decoration types. In Vue dev tool the "houseTypes" are showing an array but the "decorTypes" are showing "Reactive". I am also dynamically creating rows and removing them. for that i took an array

my vue file is--

<template>
<div v-for="(tab,k) in tabs" :key="k" >
<table class="table table-borderless col-md-12">
  <thead>
    <th>HouseAreaType</th>
    <th>DecorationType</th>
   
    <th>Action</th>
    
  </thead>
  <tbody>
    <td>
      <select
        v-model="tab.selectedHouseType"
       
        class="form-control select2"
        id="houseType1"
        required
        name="houseAreaTypeId"
      >
        <option
          v-for="houseType in houseTypes"
          :key="houseType.id"
          :value="houseType.id"
        >
          {{ houseType.name }}
        </option>
      </select>
    </td>
    <td>
      <select
        v-model="selectedDecor"
        @change="getDescription()"
        class="form-control select2"
        required
      >
        <option
          selected
          v-for="decorType in decorTypes"
          :key="decorType.id"
          :value="decorType.id"
        >
          {{ decorType.name }}
        </option>
      </select>
    </td>
      <input type="submit" class="btn btn-success" value="Save" />
    </td>
    <td>
      <input
        type="button"
        class="btn btn-success"
        value="Add More"
        @click="addRow"
      />
    </td>
    <td >
      <input
        type="button"
        class="btn btn-danger"
        value="Remove"
        @click="removeRow(k,tab)"
      />
    </td>
      </tbody>
 </table>
</div>
 </template>
  <script type="module">
    export default {
     data() {
   return {
  tabs: [{
    rate:"",
  selectedHouseType: "",
  selectedDecor: "",
  
  }],
  tabCounter: 0,
  houseTypes: {},
  decorTypes: {},
 
      };
     },
 methods: {
    getHouseTypes() {
  axios.get("/api/houseTypes").then((response) => {
    this.houseTypes = response.data;
    // this.productForm.colors = response.data;
  });
},
addRow() {
  this.tabs.push(this.tabCounter++);
},
removeRow(index,tab) {
  var idx = this.tabs.indexOf(tab);
        console.log(idx, index);
            this.tabs.splice(idx, 1);
           },
 },
 watch: {
'tab.selectedHouseType': function (value){
    axios.get('/api/decorTypes?houseAreaTypeId=' + value)
    .then((response) => {
      console.log(response.data);
      this.decorTypes = response.data.data;
    });
},

    },
  mounted() {
    this.getHouseTypes();
  }, 
  };
</script>

my api.php---

Route::get('/houseTypes',[CartController::class,'getHouseTypes'])->name('houseTypes');
Route::get('/decorTypes',[CartController::class,'getDecorTypes'])->name('decorTypes');

my CartController--

public function getHouseTypes()
{
    $houseTypes = HouseAreaType::all();
    return response()->json($houseTypes);
}
public function getDecorTypes()
{
    $houseAreaTypeId = request('houseAreaTypeId');

    $decorTypes = DecorationType::where('houseAreaTypeId',$houseAreaTypeId)->get();
    return response()->json($decorTypes);
}

rahi bd · Accepted Answer · 2022-08-14 18:10:58Z

1

solved iy.

created a method getDecor()..

<select
        v-model="tab.selectedHouseType"
        @change="getDecor()"
        class="form-control select2"
        id="houseType1"
        required
        name="houseAreaTypeId"
      >

in the mthods--

      getDecor(){
            axios.get('/api/decorTypes', {
                params: {
                    houseAreaTypeId: this.tabs[this.tabs.length- 
                    1].selectedHouseType
                }
            }).then(function(response){
                console.log(response.data);
                
            }.bind(this));
        }

answered Aug 14, 2022 at 18:10

rahi bd

478 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adison Masih Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Vue Laravel Dynamic Dependent Dropdown

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related