[Vue 警告]：无法解析指令：图标。我正在尝试将 v-icon 与 v-if 一起使用，但是在使用更改变量时我收到此警告

Question

我正在尝试将 v-icon 与 v-if 一起使用，但是在使用更改变量时我收到此警告

下面是Vue代码：

<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" v-icon color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
                        <v-icon v-else-if="!vlrUp" v-icon color="green" left>fa-solid fa-turn-down</v-icon>
                        <v-icon v-else v-icon color="red" left>fa-solid fa-turn-up</v-icon>
                    </template>
              </v-text-field>
    </div>
</v-col>

return recive [Vue warn]：无法解析指令：图标 我正在用 NULL 初始化变量，为什么会生成此警告？

Answer 1

您应该从

v-icon

组件中删除

<v-icon>

指令：

<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 #append>
        <v-icon :color="vlrUp === true ? 'red' : 'green'" left>
          fa-solid
          {{ vlrUp === true ? 'fa-turn-up' : vlrUp === false ? 'fa-turn-down' : 'fa-brazilian-real-sign' }}
        </v-icon>
      </template>
    </v-text-field>
  </div>
</v-col>