如何为Laravel API驱动的Vue3组件添加产品过滤功能？

现有一个Vue3组件，通过Laravel的资源API实现产品的分页展示，需要添加文本输入框实现实时过滤功能，尝试绑定变量传递给getProducts方法未成功，以下是原组件代码：

<template>
    <div class="container">
      <div class="row">
        <div class="col-md-4" v-for="product in products" :key="product.id">
          <div class="card mb-4">
            <!-- <img :src="product.image" class="card-img-top" alt="..."> -->
            <div class="card-body">
              <h5 class="card-title">{{ product.name }}</h5>
              <p class="card-text">{{ product.description }}</p>
              <a href="#" class="btn btn-primary">Buy</a>
            </div>
          </div>
        </div>
      </div>
      <nav>
      <ul class="pagination">
        <li class="page-item" :class="{ 'disabled': !links.prev }">
          <a class="page-link" @click.prevent="getProducts(links.prev)" href="#">Previous</a>
        </li>
        <li class="page-item">
            <span class="page-link">{{ meta.current_page }}/{{ meta.last_page }}</span>
        </li>
        <li class="page-item" :class="{ 'disabled': !links.next }">
          <a class="page-link" @click.prevent="getProducts(links.next)" href="#">Next</a>
        </li>
      </ul>
    </nav>
    </div>
</template>
<script>
export default {
    data(){
        return {
            products: [],
            meta: {},
            links: {}
        }
    },
    methods: {
        getProducts(url = '/api/products') {
            axios.get(url)
                .then(response => {
                this.products = response.data.data;
                this.meta = response.data.meta;
                this.links = response.data.links;
        });
        },
    },
    mounted(){
        this.getProducts();
    },
}
</script>

前端（Vue3）修改步骤 #

1. 添加过滤输入框 #

在模板顶部新增带双向绑定的输入框，用于接收过滤关键词：

<template>
    <div class="container mt-4">
      <!-- 新增过滤输入框 -->
      <div class="mb-4">
        <input 
          type="text" 
          class="form-control" 
          placeholder="输入产品名称/描述过滤"
          v-model="filterKeyword"
          @input="debouncedGetProducts"
        >
      </div>
      <!-- 原产品列表代码 -->
      <div class="row">
        <div class="col-md-4" v-for="product in products" :key="product.id">
          <!-- ... 原卡片代码不变 ... -->
        </div>
      </div>
      <!-- 原分页代码 -->
      <nav>
        <!-- ... 原分页代码不变 ... -->
      </nav>
    </div>
</template>

2. 更新组件数据与方法 #

添加过滤关键词属性，修改getProducts方法支持拼接过滤参数，同时添加防抖避免频繁请求：

<script>
export default {
    data(){
        return {
            products: [],
            meta: {},
            links: {},
            filterKeyword: '', // 新增过滤关键词变量
            debounceTimer: null // 防抖定时器
        }
    },
    methods: {
        getProducts(url = null) {
            let requestUrl = url || '/api/products';
            // 拼接过滤参数
            if (this.filterKeyword) {
                const separator = requestUrl.includes('?') ? '&' : '?';
                requestUrl += `${separator}search=${encodeURIComponent(this.filterKeyword)}`;
            }
            axios.get(requestUrl)
                .then(response => {
                    this.products = response.data.data;
                    this.meta = response.data.meta;
                    this.links = response.data.links;
                });
        },
        // 防抖处理：输入停止300ms后再发起请求
        debouncedGetProducts() {
            clearTimeout(this.debounceTimer);
            this.debounceTimer = setTimeout(() => {
                this.getProducts(); // 重新加载第一页过滤后的数据
            }, 300);
        }
    },
    mounted(){
        this.getProducts();
    },
}
</script>

后端（Laravel）修改步骤 #

1. 修改产品控制器逻辑 #

在产品控制器的index方法中添加模糊查询过滤：

<?php

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;
use App\Http\Resources\ProductResource; // 若使用资源类

class ProductController extends Controller
{
    public function index(Request $request)
    {
        $query = Product::query();

        // 处理搜索过滤
        if ($request->filled('search')) {
            $searchKeyword = $request->input('search');
            $query->where(function($q) use ($searchKeyword) {
                $q->where('name', 'like', "%{$searchKeyword}%")
                  ->orWhere('description', 'like', "%{$searchKeyword}%");
            });
        }

        // 分页（每页数量可根据需求调整）
        $products = $query->paginate(6);

        // 若使用资源类返回，否则直接return $products;
        return ProductResource::collection($products);
    }
}

2. 确认API路由 #

确保routes/api.php中路由指向该控制器方法：

Route::get('/products', [ProductController::class, 'index']);

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