Javascript 如何使“选择”下拉菜单成为第二个导航，并使用Vue.js处理选项卡？

我有一个使用Vue的navigaion设置选项卡，由于前面的问题，该选项卡工作正常。选项卡导航的代码如下所示：

<ul>
<c:forEach items="${tabnav.tabs}" var="tab" varStatus="loop">
  <c:if test="${loop.count le tabnav.totalTabs}">
  <li v-bind:class="{active : tabSelected = ${loop.count}}" v-on:click="tabSelected = 
  ${loop.count}">${tab.heading}</li>
  </c:if>
</c:forEach>
</ul>

---

是否需要在Vue中为此创建一个方法？

在选择面板上设置一个

v-model.number

<select v-model.number="tabSelected">
<c:forEach items="${tabnav.tabs}" var="tab" varStatus="loop">
 <c:if test="${loop.count le tabnav.totalTabs}">
  <option value="${loop.count}">${tab.heading}</option>
 </c:if>
</c:forEach>
</select>

${tab.heading}

以下是在Vue中使用的文档

---

根据注释，添加了

number

修饰符，以确保模型值为数值。

这几乎有效。当我添加

v-model

并单击桌面导航时，它工作并处于同步状态，但当我转到mobile并选择它时，它会将所有选项卡设置为

display:none

。。有什么想法吗？@lscmaro可以试试

v-model.number

。页面上呈现的输出是什么？使用视图源。下面是一个我希望它看起来如何的例子。成功了。我假设这个错误是由于字符串和int冲突造成的？我会把这个更新添加到你的答案中，以备将来参考。谢谢是的！这就是我的源代码中您的代码笔的确切输出。@lscmaro只需再澄清一点，

number

修饰符之所以需要，是因为此处的三重等于

v-bind:class=“{active:tabSelected==1}”

。如果这是一个双相等值，则不需要数字修饰符。Triple equal是精确匹配，其中double equal允许类型转换。

<select v-model.number="tabSelected">
<c:forEach items="${tabnav.tabs}" var="tab" varStatus="loop">
 <c:if test="${loop.count le tabnav.totalTabs}">
  <option value="${loop.count}">${tab.heading}</option>
 </c:if>
</c:forEach>
</select>