Условное отображение значков в зависимости от наличия определенных значений в массиве

Question

В запросе Axios у меня есть цикл for, который назначает данные объекту данных в зависимости от типа действия:

for (var i = 0; i < actions.length; i++) {
    switch (actions[i].type) {
        case vm.ACTION_TYPE_UNREAD_AUTHOR_COMMENTS:
            var authorObject = JSON.parse(actions[i].data);

            vm.actionsRequired[vm.ACTION_TYPE_UNREAD_AUTHOR_COMMENTS] = authorObject;
        break;

        case vm.ACTION_TYPE_UNREAD_EDITOR_COMMENTS:
            var editorObject = JSON.parse(actions[i].data);

            vm.actionsRequired[vm.ACTION_TYPE_UNREAD_EDITOR_COMMENTS] = editorObject;
        break;

        case vm.ACTION_TYPE_UNVERIFIED:
            var unverifiedObject = JSON.parse(actions[i].data);

            vm.actionsRequired[vm.ACTION_TYPE_UNVERIFIED] = unverifiedObject;
        break;

        case vm.ACTION_TYPE_DUPLICATES:
            var duplicatesObject = JSON.parse(actions[i].data);

            vm.actionsRequired[vm.ACTION_TYPE_DUPLICATES] = duplicatesObject;

        break;
    }
}

Этот код генерирует объект как таковой:

В моем шаблоне я пытаюсь динамически отображать значки в зависимости от того, существует ли определенная информация в этом объекте. Я начинаю с author-comments.

Вот код:

<!-- reference.article_reference_id is 1831 in this iteration -->
<span class="author-comments"
    v-if="actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS][reference.article_reference_id]">
        <div class="tool-tip" style="display:inline">
            <i class="fas fa-comment"></i>
            <span><i class="fas fa-circle"></i></span>
            <span class="tooltiptext">Unread author comments</span>
        </div>
        &nbsp;&nbsp;&nbsp;
        <span style="color:lightgray">|</span>&nbsp;
</span>
<span class="author-comments" v-else>
    <div class="tool-tip">
        <i class="saved fas fa-comment" style="color: #6C60C9"></i>
        <span class="tooltiptext">Has author comments</span>
    </div>
    &nbsp;&nbsp;&nbsp;
    <span style="color:lightgray">|</span>&nbsp;
</span>

Идентификатор ссылки на статью 1831 существует в vm.actionsRequired[vm.ACTION_TYPE_UNREAD_AUTHOR_COMMENTS][0], но не отображает правильный значок.

Я думал об использовании комбинации v-for и v-if, но это просто отображало значок для каждого комментария, который был там.

Не уверен, что я делаю не так.

---

Edit:

Я внес следующие изменения в код:

<!-- IF/ELSE Author comment icons -->
<div style="display:inline" v-for="(action, actionIndex) in actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS]">
    {{ action.article_reference_id }}
    <span class="author-comments"
        v-if="action.article_reference_id == reference.article_reference_id">
            <div class="tool-tip" style="display:inline">
                <i class="fas fa-comment"></i>
                <span><i class="fas fa-circle"></i></span>
                <span class="tooltiptext">Unread author comments</span>
            </div>
            &nbsp;&nbsp;&nbsp;
            <span style="color:lightgray">|</span>&nbsp;
    </span>
    <span class="author-comments" v-else>
        <div class="tool-tip">
            <i class="saved fas fa-comment" style="color: #6C60C9"></i>
            <span class="tooltiptext">Has author comments</span>
        </div>
        &nbsp;&nbsp;&nbsp;
        <span style="color:lightgray">|</span>&nbsp;
    </span>
</div>

Однако для каждого непрочитанного комментария отображается значок.

Есть ли способ отобразить значок только один раз?

Answer 1

Это не то, как скобочная запись работает в JavaScript ...

Предполагая, что ACTION_TYPE_UNREAD_AUTHOR_COMMENTS равно author-comment, actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS] даст этот массив:

[
  { "id": 19, "article_reference_id": 1831, "user_id": 25493, "role_id": 65536, "text": "This is comment number 7" },
  { "id": 20, "article_reference_id": 3062, "user_id": 2, "role_id": 65536, "text": "This is comment number 8" },
  { "id": 30, "article_reference_id": 12889, "user_id": 25493, "role_id": 65536, "text": "fgdfgfgergfsgsfsdfsdfsdf" },
]

Далее, если reference.article_reference_id были 1831, результат будет:

actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS][1831] === undefined

Это undefined, поскольку в указанном выше массиве нет ключа свойства с таким именем.Допустимыми ключами для этого массива являются 0, 1 и 2 (соответствующие индексам).

Возможно, в конечном итоге этот код предназначен для определения наличия непрочитанных комментариев.Если это так, вы должны вместо этого проверить, не является ли массив author-comment непустым:

<span class="author-comments"
      v-if="actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS].length">

ОБНОВЛЕНИЕ:

Однако, он отображает значокдля каждого непрочитанного комментария есть.

Значок комментария отображается для каждого непрочитанного комментария, поскольку <i class="fa-comment"> существует в в обоих v-if и v-else блоках, эффективно создаваябезусловный значок:

<span v-if="...">
  <i class="fas fa-comment"></i>
</span>
<span v-else>
  <i class="saved fas fa-comment"></i>
</span>