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