более сложная метка в чекбоксе - Vuetify

Question

Вот мой простой код:

<v-checkbox
  v-model="rodo"
  label="I agree to Privacy Policy (show more)"
  :rules="policyRules"
  required
></v-checkbox>

Я хочу, чтобы внутри метки был простой код, просто чтобы показать больше при нажатии. Как лучше всего подойти к этому? Я хочу, чтобы на этикетке было что-то подобное:

I agree to Privacy Policy 
<span @click="showMore=!showMore">(show more)</span> 
<span v-show="showMore">Lorem ipsum...</span>

Answer 1

Поскольку вы используете vuetify, я думаю, вы можете легко добавить значок и щелкнуть по нему:

      <v-checkbox
        v-model="rodo"
        label="I agree to Privacy Policy"
        append-icon="mdi-chevron-down"
        required
        @click:append="showMore = !showMore"
      ></v-checkbox>
      <span v-if="showMore">{{ policyRules }}</span>

Answer 2

Вы можете использовать прорезь для этикеток.

<v-checkbox
  v-model="rodo"
  :rules="policyRules"
  required>
  <template v-slot:label>
   I agree to Privacy Policy 
   <span @click="showMore=!showMore">(show more)</span> 
   <span v-show="showMore">Lorem ipsum...</span>
  </template>
</v-checkbox>

См. Также дополнительную информацию в документации: https://vuetifyjs.com/en/components/selection-controls/