Vue.js 'if - else' 不能使用很棒的字体

Posted 2023-03-07

【中文标题】Vue.js \'if - else\' 不能使用很棒的字体

【英文标题】：Vue.js 'if - else' not working with font awesomeVue.js 'if - else' 不能使用很棒的字体

【发布时间】：2019-03-06 08:52:16

【问题描述】：

这是我的代码：

<tr v-for="(i,  index) in items.data">
  <td> index </td>
  <td> i.name </td>
  <td> i.producer </td>
  <td><font-awesome-icon v-if="i.recieved" icon="check" /><font-awesome-icon v-else icon="times" /></td>
</tr>

我从服务器接收到数据，其中i.recieved 可以是true 或false，但是当我编译这个时，我总是只看到图标times。这很奇怪，因为我的服务器上有 4 个接收到的字段为 true。

那你觉得我应该怎么做？

在控制台中我只看到一个错误：

error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src/views/Home.vue:15:7:

> 15 |       <tr v-for="(i,  index) in items.data">
     |       ^

【问题讨论】：

安装 vue-dev-tools 并确保你有 i.received=true 的项目。

我可以在服务器上看到它，所以是的，我有

那是我的失败！我写了收到，未收到

【参考方案1】：

您的控制台错误是因为您的 v-for 没有定义键。

建议尽可能使用 v-for 提供键，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。

由于它是 Vue 识别节点的通用机制，因此该键还有其他用途，与 v-for 无关，我们将在后面的指南中看到。

More Info about the Key

【参考方案2】：

正如警告所说，您需要添加一个密钥。 https://vuejs.org/v2/guide/list.html#key

试试这个。

<tr v-for="(i,  index) in items.data" :key="index">
  <td> index </td>
  <td> i.name </td>
  <td> i.producer </td>
  <td><font-awesome-icon v-if="i.recieved" icon="check" /><font-awesome-icon v-else icon="times" /></td>
</tr>

【讨论】：

那是我的失败！我写了收到，未收到