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:
@@ -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}`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user