問題一：v-for遍歷本地圖片不顯示，用require處理（目前了解是文件路徑的問題造成的）
問題二：彈出層的輪播圖執行完成后不會從頭再開始執行，例如三張圖片，首此打開第一張，打開后滑動到第三張，再次打開輪播圖顯示第一張圖而非第三張，使用v-if進行輪播圖元素渲染（目前了解是框架采用v-show進行渲染，只是顯示隱藏，沒有所謂的重置效果）
代碼如下：
<template>
<div class="home">
<!-- 國家級證書h5 -->
<div class="national_h5 national">
<div class="internation_national" @click="nation_clickMore">
<p>國家級證書</p>
<van-icon name="arrow-down" />
</div>
<div v-show="shownation" class="national_list">
<!-- 圖一 -->
<van-cell @click="showPopup31" class="national_img">
<img src="../assets/ls_55.jpeg" alt />
</van-cell>
<!-- 彈出層-->
<van-popup v-model="flag31" class="national_detail">
<!-- 問題二，多加v-if-->
<van-swipe v-if="flag31" class="my-swipe" indicator-color="white" initial-swipe="0">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
<!-- 圖二 -->
<van-cell @click="showPopup32(1)" class="national_img">
<img src="../assets/ls_56.jpeg" alt />
</van-cell>
<van-popup v-model="flag32" class="national_detail">
<van-swipe v-if="flag32" class="my-swipe" indicator-color="white" initial-swipe="1">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
<div class="national_lists">
<!-- 圖三 -->
<van-cell @click="showPopup33(2)" class="national_img">
<img src="../assets/ls_57.jpeg" alt />
</van-cell>
<van-popup v-model="flag33" class="national_detail">
<van-swipe v-if="flag33" class="my-swipe" indicator-color="white" initial-swipe="2">
<template>
<van-swipe-item v-for="(item,index) in chee" :key="index">
<img :src="item.img" alt />
</van-swipe-item>
</template>
</van-swipe>
</van-popup>
</div>
</div>
</div>
</div>
</template>
export default {
name: "home",
data() {
return {
flag31: false,
flag32: false,
flag33: false,
shownation: false,
chee: [
//問題一
{ img: require("../assets/ls_55.jpeg") },
{ img: require("../assets/ls_56.jpeg") },
{ img: require("../assets/ls_57.jpeg") }
]
};
},
methods: {
//國家
nation_clickMore() {
this.shownation = !this.shownation;
},
showPopup31() {
this.flag31 = true;
},
showPopup32() {
this.flag32 = true;
},
showPopup33() {
this.flag33 = true;
}
}
};