styling v-input details slot like an error message

[rramsey]

I know, your first question is, "Why don't you just use an error message?" Because I don't know how to get it to display html. :)

If a person has an error in a particular input field, I want to show an error message with a link for where to go to get help. My code looks something like this:

<script>
    const name: Ref<string> = ref('');
    const validName: ComputedRef<boolean> = computed( (): boolean => { return false })
    const invalidNameMsg: ComputedRef<string> = computed( (): string => {
        return validName ? '' : 'Visit this <a href="https:/server/answers">explanatory page</a> for more information'
    })
</script>
<template>
    <v-text-field type="text" v-model="name" :rules="[validName]" :class='{ "v-input--error": validName !== true}'>
        <template v-slot:details v-if="validName !== true">
            <div class="v-messages">
                <div v-html="invalidNameMsg" class="v-messages__message">
                </div>
            </div>
        </template>
    </v-text-field>
</template>

Because I want a clickable link in the error message, I need to use v-html to preserve the html tags (as far as I know). This almost works, except that the position of the message is different. There is space on the left of the message where an actual error message would appear. I can fix that with css, but it would be nice if I didn't have to.

It's also clunky because I had to duplicate the classes so the css for the error message, like the color, would be applied.

Any ideas of a better way to handle this?

[KaelWD]

<template #message="{ message }">
  <span v-html="message"></span>
</template>