Vue.js 'if - else' не работает со шрифтом awesome

Question

Вот мой код:

<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">
     |       ^

Answer 1

Ваши ошибки консоли возникают из-за того, что в вашем v-for не определен ключ.

Рекомендуется предоставлять ключ с v-for всякий раз, когда это возможно, за исключением случаев, когда повторяющееся содержимое DOM является простым, или вы намеренно полагаетесь на поведение по умолчанию для повышения производительности.

Поскольку этоУниверсальный механизм Vue для идентификации узлов, ключ также имеет другие применения, которые специально не связаны с v-for, как мы увидим позже в руководстве.

Дополнительная информация о ключе

Answer 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>