Vuetifyのv-checkboxにaタグを設定する

Vuetifyのv-checkboxは、labelスロットを使うことで表示内容をカスタマイズできる。

利用規約のようなリンクを含むチェックボックスを作ろうとした際に、リンクが押せない現象が起きたので対応方法を調べた。

<v-checkbox
  v-model="checkbox"
  :rules="[v => !!v || 'You must agree to continue!']"
  required
>
  <div slot='label'>
    <v-dialog
      v-model="modal"
      width="500"
    >
      <template v-slot:activator="{ on }">
        I accept <a v-on:click.stop.prevent v-on="on">the terms of service</a>
      </template>

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          Terms
        </v-card-title>

        <v-card-text>
          <ul>
            <li>terms text</li>
          </ul>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="agree"
          >
            Agree
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</v-checkbox>

肝心なのは↓の部分で、v-on:click.preventを指定することでクリックイベントをキャンセルしている。

<a v-on:click.prevent v-on="on">the terms of service</a>

これによってリンクをクリックした際にモーダルが表示されるようになった。

参考

• [[Feature Request] Cannot click a link in v-checkbox's label without checking the checkbox · Issue #2669 · vuetifyjs/vuetify](https://github.com/vuetifyjs/vuetify/issues/2669)
• Selection control components — Vuetify.js
• イベントハンドリング — Vue.js