Vue.jsを使用して2番目のナビゲーションを選択し、タブを使ってドロップダウンを選択するにはどうすればいいですか？

Question

私は以前の質問HEREのおかげでうまく動いているVueを使ってナビゲート設定のタブを持っています。タブのナビゲーションのコードは次のようになります。

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

私の目標は、タブのコンテンツ領域に対して2つのナビゲーションを持つことです。デスクトップの場合は<li>、モバイルの場合は<select>が動的に作成されます。

私はセレクトに問題があるようですが、タブは変更されず、2つのナビゲーションは互いに同期していません。デスクトップli navを使用して表示タブを変更する場合、モバイルselectオプションは正しいアクティブなタブのコンテンツ領域/オプションをそのまま維持する必要があります。選択のための

マイコードはこれです：

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

私は、このためのVueでメソッドを作成する必要がありますか？

Answer 1

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> 

ここには、Vueのbinding a selectのドキュメントがあります。

コメントに基づいて、number修飾子を追加して、モデル値が数値であることを確認しました。