Vant Ui Mobile Swipe，DropDown 不工作答案

【问题标题】：Vant Ui Mobile Swipe , DropDown not workingVant Ui Mobile Swipe，DropDown 不工作
【发布时间】：2023-01-26 20:59:47
【问题描述】：

我在第一个索引步骤中使用来自 youzan 的 Vant ui Mobile，它在第二个或第三个索引步骤中正常运行，文本没有出现

笔：https://codepen.io/flint002/pen/dyZpGpW?editors=1000

代码

网页格式

 <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>

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 },
      ],
    };
  },
});

风格

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 500px;
}

【问题讨论】：

标签： javascript vue.js vuejs2 cdn vantui

【解决方案1】：

问题出在图书馆。用Vant UI的version 4还是没有修复。

我创建了一个GitHub Issue

const { createApp, ref } = Vue;
    
const App = {
  setup() {
    const index = ref(0);
    const onChange = (i) => index.value = i;
    return { index, onChange };
  },
  data() {
      return {
          value1: 0,
          option1: [
            { text: "Option1", value: 0 },
            { text: "Option2", value: 1 },
            { text: "Option3", value: 2 },
          ]
      }
  }
}

const app = createApp(App)
app.use(vant);
app.use(vant.Lazyload, {
  lazyComponent: true
});
app.mount('#app')

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 500px;
}

<link
  rel="stylesheet"
  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
/>
<div id="app">
Swipe Index: {{index}}
<van-swipe class="my-swipe" @change="onChange" :width="200">
  <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>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>

【讨论】：