VueJS结合Laravel实现Collection下拉联动加载Categories问题求助

核心问题梳理 #

1. 前端请求接口时没有携带选中的collection_id参数，后端返回所有关联数据，没有过滤对应当前选中集合的分类
2. 分类下拉框没有使用v-for遍历分类列表，仅写了单个option，无法渲染多个分类选项
3. 响应式数据中没有定义存储分类列表的数组变量，无法承载接口返回的多个分类数据

方案1（推荐：修改后端接口，减少冗余数据传输） #

步骤1：修改Laravel后端代码 #

首先在routes/api.php中新增专门的分类查询路由：

Route::get('/categories-by-collection', [ProductController::class, 'getCategoriesByCollection']);

控制器新增对应查询方法：

use Illuminate\Http\Request;

public function getCategoriesByCollection(Request $request){
    // 校验传入参数
    $request->validate([
        'collection_id' => 'required|integer|exists:collections,id'
    ]);
    // 只查询对应集合下的分类
    $categories = Category::where('collection_id', $request->collection_id)
        ->select('id as category_id', 'name as category_name')
        ->get();
    return response()->json($categories);
}

步骤2：修改Vue前端代码 #

首先调整响应式数据定义：

data() {
    return {
      categories: [], // 新增分类列表存储变量
      collection: null,
      category: null,
    };
},

修改分类下拉框模板，增加循环渲染：

<div class="form-group">
  <label for="">Category</label>
  <select class="form-control" v-model="category">
    <option
      v-for="item in categories"
      :key="item.category_id"
      :value="item.category_id"
    >
      {{ item.category_name }}
    </option>
  </select>
</div>

修改getCategory请求方法，携带选中的集合ID：

methods: {
    async getCategory() {
      // 未选中集合时清空分类选项
      this.categories = []
      this.category = null
      if (!this.collection) return
      try {
        const { data } = await axios.get("/api/categories-by-collection", {
          params: { collection_id: this.collection }
        })
        this.categories = data
      } catch (err) {
        console.error('获取分类失败:', err);
      }
    },
}

方案2（无需改后端，前端直接过滤数据） #

如果不想调整后端接口，仅修改getCategory方法即可，其余修改内容和方案1一致：

methods: {
    getCategory() {
      this.categories = []
      this.category = null
      if (!this.collection) return
      axios
        .get("/api/products")
        .then((response) => {
          // 过滤对应当前集合的分类并去重
          const filteredList = response.data.filter(item => item.collection_id === this.collection)
          this.categories = Array.from(new Map(filteredList.map(item => [item.category_id, item])).values())
        })
        .catch((err) => {
          console.error('获取分类失败:', err);
        });
    },
}

内容的提问来源于stack exchange，提问作者Harout deurdulian