Vant Ui Mobile Swipe , DropDown not working

Viewed 117

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;
}
0 Answers
Related