Comment faire pour sélectionner sélectionner une seconde navigation et travailler avec des onglets en utilisant Vue.js?

Question

J'ai un onglet avec la configuration navigaion en utilisant Vue qui fonctionne très bien grâce à une question précédente HERE. Le code de la navigation onglets ressemble à ceci:

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

Mon but est d'avoir 2 navigation pour la zone de contenu onglets. Le <li> dynamiquement créé pour le bureau et une liste déroulante <select> pour mobile.

Je semblent avoir des problèmes avec la sélection et il ne changera pas les onglets et les 2 ne sont pas en navigations synchronisés entre eux. Ce qui signifie que si je devais changer l'onglet visible en utilisant le nav li nav, l'option mobile select devrait garder la zone/option de contenu de l'onglet actif correct vice versa.

code Mon la sélection est la suivante:

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

Dois-je créer une méthode dans Vue pour cela?

Answer 1

Définir un v-model.number sur la sélection.

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

Voici la documentation de binding a select dans Vue.

Sur la base des commentaires, a été ajouté le modificateur number pour vous assurer que la valeur du modèle est numérique.