How to make select dropdown a second navigation and work with tabs using Vue.js?

Question

I have a tabs with navigaion setup using Vue that is working just fine thanks to a previous question HERE. The code for the tabs navigation looks like this:

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

My goal is to have 2 navigation for the tabs content area. The dynamically created <li> for desktop and a <select> dropdown for mobile.

I seem to be having issues with the select and it will not change the tabs and the 2 navigations are not in sync with each other. Meaning if I were to change the visible tab using the desktop li nav, the mobile select option should keep the correct active tab content area/option vice verse.

My Code for the select is this:

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

Do I need to create a method in Vue for this?

tony19 · Accepted Answer · 2022-07-16 02:47:26Z

1

Set a v-model.number on the select.

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

Here's the documentation for binding a select in Vue.

Based on comments, the number modifier was added to make sure the model value is numeric.

edited Jul 16, 2022 at 2:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 21, 2017 at 2:05

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lscmaro Over a year ago

This almost works. When I add the v-model and click on the desktop nav it works and is in sync, but when I go to mobile and select it sets all the tabs to display:none .. Any thoughts?

Bert Over a year ago

@lscmaro might try v-model.number. What is the rendered output on the page? Use View Source. Here is an example of how I would expect it to look. codepen.io/Kradek/pen/JrKEdN?editors=1010

lscmaro Over a year ago

That did it. I assume that error was due to string vs int conflicts? I'll add that update to your answer for future references too. Thanks!

lscmaro Over a year ago

Yep! That is the exact output in my source from your codepen.

Bert Over a year ago

@lscmaro Just one more clarification, the reason the number modifier is required is because of the triple equals here v-bind:class="{active : tabSelected === 1}". Were that a double equal, the number modifier would not be required. Triple equal is exact match, where double equal allows type conversions.

|

Collectives™ on Stack Overflow

How to make select dropdown a second navigation and work with tabs using Vue.js?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related