How to target a blank link within the label attr with vue?

Question

Neither   establish a space immediately before or within a link nor any kind of link works fine while using links within the label attribute - It only checks the box. Using mousewheel works. How to target a new tab with simple leftclick?

<v-checkbox
   v-model="checkbox"
   :rules="[v => !!v || 'Its required!']"
   label=""
   required
   >
   <template v-slot:label>
      <a href="/#/URL" target="_blank" @click.stop.prevent="dialog = true"> URL_A </a> &nbsp;
      <v-btn href="/#/URL" target="_blank" > URL_B </v-btn>
      &nbsp;
      <navigation-link url="/#/URL" target="_blank">
         URL_C
      </navigation-link>
   </template>
</v-checkbox>

Answer 1

This will not work. When you associate a <label> element with a checkbox <input> (which is what Vuetify is doing behind the scenes), clicking on the label is supposed to toggle the value of the checkbox. It cannot also be a link because then the click action would be ambiguous. If someone clicks the link, should it open the link or toggle the checkbox? It appears that toggling the checkbox wins in this case.

If you need link text to go next to your checkbox, it has to be its own separate element. You can use CSS to get the two elements to line up:

<v-row>
  <v-col cols="12">
    <v-checkbox
      v-model="checkbox1"
      color="primary"
      :rules="[v => !!v || 'Its required!']"
      required
    >
      <template #label>
        <a href="https://example.com" target="_blank">This link cannot be clicked</a>
      </template>
    </v-checkbox>
  </v-col>
  <v-col cols="12">
    <v-checkbox
      v-model="checkbox1"
      class="pa-0 ma-0"
      color="primary"
      :rules="[v => !!v || 'Its required!']"
      required
      style="float: left;"
    ></v-checkbox>
    <a href="https://example.com" target="_blank">This link CAN be clicked</a>
  </v-col>
</v-row>

There's a working demo in this codeply.

Answer 2

Just use @click.stop on the link:

<v-checkbox v-model="checkbox">
   <template v-slot:label>
      <a href="/#/URL" target="_blank" @click.stop> URL_A </a>
   </template>
</v-checkbox>

Answer 3

It´s done by using a modal:

      <v-container v-if="showModal" class="modal-mask white--text">
        <transition name="modal">
          <v-container >
            <v-container class="modal-wrapper">
              <v-container class="modal-dialog">
                <v-container class="modal-content">
                  <v-container class="modal-header">
                    <h4 class="modal-title">Title</h4>
                  </v-container>
                  <v-container class="modal-body">
                    Lorem ipsum
                  </v-container>
                  <v-container two-line>
                  <v-btn color="primary" class="close" @click="showModal=false">
                    <span>Close</span>
                  </v-btn>
                  </v-container>
                </v-container>
              </v-container>
            </v-container>
          </v-container>
        </transition>
      </v-container>

      <script>        
        export default {
          data: () => {
            return {
              showModal: false
            }
          }
        }
      </script>

      <style>
        .modal-mask {
          position: fixed;
          z-index: 9998;
          top: 0%;
          left: -10px;
          height: 100%;
          max-width: none;
          background-color: rgba(0, 0, 0, .8);
          display: table;
          transition: opacity .3s ease;
        }

        .modal-wrapper {
          display: table-cell;
          vertical-align: top;
        }

        .modal-dialog{
          overflow-y: initial !important
        }
        .modal-body{
          height: 500px;
          overflow-y: auto;
        }
      </style>