[Vuejs]-More complicated label in checkbox – Vuetify

by

3👍

✅

You can use the label slot. 

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

See also documentation for more information:
https://vuetifyjs.com/en/components/selection-controls/

👤Marco

2👍

Since you are using vuetify I think you can easily append an icon and click on that:

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

enter image description here

👤mobin

Leave a comment