Vue+Laravel动态联动下拉框问题：无法获取对应装修类型

我能成功获取房屋面积类型，但无法获取对应的装修类型。Vue开发者工具里houseTypes显示为数组，decorTypes显示为“Reactive”。另外动态添加/删除行的功能也存在问题，目前用tabs数组实现该功能。

Vue组件代码 #

<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>
    <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;
      });
    },
    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>

Laravel路由（api.php） #

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

Laravel控制器（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);
}

问题修复要点 #

1. 装修类型绑定与数据隔离

   • 全局selectedDecor无法对应多行间的独立选择，需改为v-model="tab.selectedDecor"
   • 全局decorTypes会导致多行数据冲突，应给每个tab对象添加独立的decorTypes属性，避免切换行时互相影响

2. 接口响应处理修正

   • 控制器返回的是直接的集合数据，前端无需取response.data.data，改为response.data即可

3. 动态添加行逻辑修正

   • 当前addRow方法推入的是数字，需改为与初始tab结构一致的对象：

     addRow() {
       this.tabs.push({ rate: "", selectedHouseType: "", selectedDecor: "", decorTypes: [] });
     }
     

4. 监听逻辑调整

   • 无法直接监听数组中单个tab的属性，改为在房屋类型选择框添加@change事件触发数据获取：

     <select
       v-model="tab.selectedHouseType"
       @change="fetchDecorTypes(tab, $event.target.value)"
       ...其他属性
     >
     

   • 新增对应方法：

     fetchDecorTypes(tab, houseTypeId) {
       axios.get('/api/decorTypes?houseAreaTypeId=' + houseTypeId)
       .then((response) => {
         tab.decorTypes = response.data;
       });
     }
     

5. 初始数据类型修正

   • houseTypes和decorTypes初始定义为对象，接口返回的是数组，需改为初始化为[]

内容的提问来源于stack exchange，提问作者rahi bd