label with url in Vue.js

Question

Here's my code:

<v-checkbox
    :label="I agree with the Privacy Policy"
    v-model="agree2"
></v-checkbox>

and I want to have an action when I click Privacy Policy. I know I can put an url there, but I would rather show model with Vue. How can I do that?

Answer 1

Use the slot with name 'label' and put into whatever any you wont:

<v-checkbox ...>
    <div slot='label'>I agree with the <myLinkComponent>...</...></div>
</v-checkbox>

You can see that from documentation: https://vuetifyjs.com/en/components/checkboxes/#label-slot