I am attempting to utilize v-icon with v-if, but when I change the variable, I receive this warning message
Here is the Vue code snippet:
<v-col cols="6" xs="12" md="2" lg="2" xl="2">
<span class="span_titulo">Valor Unitário:</span>
<div class="form-group m-1">
<v-text-field class="mt-0" type="text" maxlength="6" disabled v-model="form.vlrUnit" hide-details>
<template v-slot:append>
<v-icon v-if="vlrUp === null" color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
<v-icon v-else-if="!vlrUp" color="green" left>fa-solid fa-turn-down</v-icon>
<v-icon v-else color="red" left>fa-solid fa-turn-up</v-icon>
</template>
</v-text-field>
</div>
</v-col>
The error message reads: [Vue warn]: Failed to resolve directive: icon. I have initialized the variable with NULL, so why is this warning being generated?