mountedから特定のクラスを持つボタンに対してtabindex=-1を付与したらできる

成果物

このサイトを参考に作った。

https://reffect.co.jp/vue/vuetify-first-time

この目のアイコンはtabキーを押したときに飛ばされるようにする

結論

mounted() {
    const elements = document.getElementsByClassName('tabindexから除外したいクラス名');
    elements[0].tabIndex = -1;
    elements[1].tabIndex = -1;
},

解説

フォームのコード

<v-form ref="test_form">
      <v-text-field v-model="postData.email" prepend-icon="mdi-at" label="メールアドレス"
          :rules="[rules.required,rules.email]" />
      <v-text-field v-model="postData.password" v-bind:type="showPassword ? 'text' : 'password'"
          prepend-icon="mdi-lock" v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
          label="パスワード" required :rules="[rules.required,rules.password]"
          @click:append="showPassword = !showPassword" />

      <v-text-field v-model="postData.passwordConfirm"
          v-bind:type="showPasswordConfirm ? 'text' : 'password'" prepend-icon="mdi-lock"
          v-bind:append-icon="showPasswordConfirm ? 'mdi-eye' : 'mdi-eye-off'" label="パスワード再入力"
          required
          :rules="[rules.required,rules.password,(postData.password === postData.passwordConfirm) || 'パスワードが一致しません。']"
          @click:append="showPasswordConfirm = !showPasswordConfirm" />
      <v-btn class="info" @click="submit">新規登録</v-btn>
</v-form>

詳しくは上記のサイトを見てくれ。

フォーム自体 にこの後何か手を加えることはない。

mounted

mounted() {
    const elements = document.getElementsByClassName('v-icon--link');
    elements[0].tabIndex = -1;
    elements[1].tabIndex = -1;
},

これでできる。

今回は、パスワードを表示する目のアイコンがコンパイル後には「v-icon--link」というクラスを持つbuttonになっていた。

なので、それを対象にjavascriptで動的にtabindex=”-1”を付与したかんじ。