Как настроить таргетинг на пустую ссылку в метке attr с помощью vue?

Question

Ни то, ни другое  устанавливайте пробел непосредственно перед или внутри ссылки, и никакие ссылки не работают нормально при использовании ссылок в атрибуте label - он только устанавливает флажок. Использование колесика мыши работает. Как настроить таргетинг на новую вкладку простым щелчком левой кнопки мыши?

<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

Так не пойдет. Когда вы связываете<label> элемент с флажком <input>(это то, что Vuetify делает за кулисами), нажатие на метку должно переключать значение флажка. Это также не может быть ссылкой, потому что тогда действие щелчка будет неоднозначным. Если кто-то нажимает на ссылку, должен ли он открывать ссылку или переключать флажок? Похоже, что переключение флажка в этом случае выигрывает.

Если вам нужно, чтобы текст ссылки находился рядом с вашим флажком, это должен быть отдельный элемент. Вы можете использовать CSS, чтобы выровнять два элемента:

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

В этом коде есть рабочая демонстрация.

Answer 2

Просто используйте @click.stop по ссылке:

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

Answer 3

Это делается с помощью модального окна:

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