fix(产品列表): 修复搜索查询未去除空格的问题
在搜索功能中增加trim()处理,确保查询字符串去除前后空格后再进行匹配。同时将product-item的key从id改为cellId以避免潜在冲突
This commit is contained in:
parent
afdc9690e1
commit
f8b616a064
|
|
@ -8,11 +8,12 @@
|
|||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build:staging": "vue-tsc && vite build --mode staging",
|
||||
"build": "vue-tsc && vite build",
|
||||
"build": "vue-tsc && vite build && pnpm run zip",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --fix",
|
||||
"prepare": "husky",
|
||||
"test": "vitest"
|
||||
"test": "vitest",
|
||||
"zip": "7z a -tzip dist/shop-web-%date:~0,4%%date:~5,2%%date:~8,2%-%time:~0,2%%time:~3,2%%time:~6,2%.zip .\\dist\\* -xr!*.zip"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vant/touch-emulator": "1.4.0",
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ function getCartItemCount(cellId: number) {
|
|||
function filterProductsByName(products: Product[], query: string) {
|
||||
if (!query) return products;
|
||||
return products.filter(p =>
|
||||
p.name.toLowerCase().includes(query.toLowerCase())
|
||||
p.name.toLowerCase().includes(query.trim().toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ function handleCheckout() {
|
|||
<div ref="scrollContainer" class="product-list">
|
||||
<van-search v-model="searchQuery" placeholder="搜索商品名称" shape="round" class="search-box" />
|
||||
<div class="category-section">
|
||||
<van-cell v-for="product in currentProducts" :key="product.id" class="product-item">
|
||||
<van-cell v-for="product in currentProducts" :key="product.cellId" class="product-item">
|
||||
<template #icon>
|
||||
<van-image :src="product.image" width="80" height="80" @click.stop="showProductDetail(product.id)"
|
||||
class="product-image">
|
||||
|
|
|
|||
Loading…
Reference in New Issue