fix: 修复微信小程序 v-for 事件绑定兼容性问题

- 修复 v-for 循环中 @click 直接传递 item 导致的错误
- 使用 data- 属性传递数据,通过 event.currentTarget.dataset 获取
- 适配微信小程序模板编译限制

Error: v-for 暂不支持循环数据 (env: macOS,mp,1.06.2307250)
This commit is contained in:
2026-03-05 10:47:45 +08:00
parent 22d49935ae
commit 15ad15b501

View File

@@ -36,7 +36,7 @@
class="nutrient-card" class="nutrient-card"
v-for="(item, index) in nutrientList" v-for="(item, index) in nutrientList"
:key="index" :key="index"
@click="goToNutrientDetail(item)" @click="goToNutrientDetail" data-nutrient-index="{{ index }}"
> >
<view class="nutrient-icon-wrapper"> <view class="nutrient-icon-wrapper">
<text class="nutrient-icon">{{ item.icon }}</text> <text class="nutrient-icon">{{ item.icon }}</text>
@@ -65,7 +65,7 @@
class="knowledge-item" class="knowledge-item"
v-for="(item, index) in (guideList || [])" v-for="(item, index) in (guideList || [])"
:key="item.knowledgeId || item.id || index" :key="item.knowledgeId || item.id || index"
@click="goToDetail(item)" @click="goToDetail" data-item-id="{{ item.id }}" data-item-kid="{{ item.knowledgeId }}"
> >
<view class="knowledge-cover" v-if="item.coverImage || item.cover_image"> <view class="knowledge-cover" v-if="item.coverImage || item.cover_image">
<image :src="item.coverImage || item.cover_image" mode="aspectFill" class="cover-img" /> <image :src="item.coverImage || item.cover_image" mode="aspectFill" class="cover-img" />
@@ -96,7 +96,7 @@
class="knowledge-item" class="knowledge-item"
v-for="(item, index) in (articleList || [])" v-for="(item, index) in (articleList || [])"
:key="item.knowledgeId || item.id || index" :key="item.knowledgeId || item.id || index"
@click="goToDetail(item)" @click="goToDetail" data-item-id="{{ item.id }}" data-item-kid="{{ item.knowledgeId }}"
> >
<view class="knowledge-cover" v-if="item.coverImage || item.cover_image"> <view class="knowledge-cover" v-if="item.coverImage || item.cover_image">
<image :src="item.coverImage || item.cover_image" mode="aspectFill" class="cover-img" /> <image :src="item.coverImage || item.cover_image" mode="aspectFill" class="cover-img" />
@@ -263,24 +263,24 @@ export default {
this.currentTab = tab; this.currentTab = tab;
await this.loadKnowledgeList(); await this.loadKnowledgeList();
}, },
goToNutrientDetail(item) { goToNutrientDetail(event) {
const index = event.currentTarget.dataset.nutrientIndex;
const item = this.nutrientList[index];
if (!item) return;
uni.navigateTo({ uni.navigateTo({
url: `/pages/tool/nutrient-detail?name=${item.name}` url: `/pages/tool/nutrient-detail?name=${item.name}`
}) })
}, },
goToDetail(item) { goToDetail(event) {
if (!item) { const id = event.currentTarget.dataset.itemId;
uni.showToast({ title: '暂无详情', icon: 'none' }); const knowledgeId = event.currentTarget.dataset.itemKid;
return; const finalId = knowledgeId || id;
} if (!finalId) {
// 确保 knowledgeId 或 id 存在才跳转,否则提示暂无详情 uni.showToast({ title: "暂无详情", icon: "none" });
const id = item.knowledgeId ?? item.id ?? item.knowledge_id;
if (id === undefined || id === null || id === '' || (typeof id === 'number' && isNaN(id))) {
uni.showToast({ title: '暂无详情', icon: 'none' });
return; return;
} }
uni.navigateTo({ uni.navigateTo({
url: `/pages/tool/knowledge-detail?id=${id}` url: `/pages/tool/knowledge-detail?id=${finalId}`
}); });
} }
} }