I use Vant ui Mobile from youzan in the first index step it runs normally for the second or third the text doesn't appear
pen : https://codepen.io/flint002/pen/dyZpGpW?editors=1000
CODE
html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<div id="app">
<van-swipe class="my-swipe" >
<van-swipe-item>
1
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" ></van-dropdown-item>
</van-dropdown-menu>
</van-swipe-item>
<van-swipe-item>
2
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" ></van-dropdown-item>
</van-dropdown-menu>
</van-swipe-item>
<van-swipe-item>
3
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" ></van-dropdown-item>
</van-dropdown-menu>
</van-swipe-item>
</van-swipe>
</div>
js
import "https://cdn.jsdelivr.net/npm/@vant/touch-emulator";
// Render the Button component
new Vue({
el: "#app",
data() {
return {
value1: 0,
option1: [
{ text: "Option1", value: 0 },
{ text: "Option2", value: 1 },
{ text: "Option3", value: 2 },
],
};
},
});
Style
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
height: 500px;
}