vue components and tabindex, how do you do it?

Question

I have a custom view component that renders as three select lists, "Year", "Make" and "Model" and it's working well for me.

My problem lies when it's dynamically placed on a parent form... The tab order is out of whack and my research seems to indicate that is normal without a tabindex set.

Let's say I have something like this:

<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"> </my-widget>
<input type="text" v-model="shop" tabindex="5">

How do I tell myWidget to set the tabindex for the selects inside my widget to 2,3,4? Ideally I'd like to be able to use two of these widgets on the same page so hardcoding wont work.

Does anyone have any thoughts on the best way to assign tabindex inside a component?

Answer 1

You could have the tabindex as a prop on your my-widget component so that it can be dynamic. For example

my-widget component

<template>
    <div>
        <input type="text" :tabindex="tabindex"/>
        <input type="text" :tabindex="tabindex + 1"/>
    </div>
</template>

<script>
   export default {
      props: {
         tabindex: {
             type: Number,
             required: false,
             default: 1
         }
   }
</script>

so then your code will look like

<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"
     :tabindex="2"
> </my-widget>
<input type="text" v-model="shop" tabindex="5">

and if you add another one

<my-widget v-if="someCondition"
     :tabindex="6"
> </my-widget>