Vue.js 根据数组中存在的特定值有条件地呈现图标

在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;
    }
}

1831

的文章参考ID存在于

vm.actions需要[vm.ACTION\u TYPE\u UNREAD\u AUTHOR\u COMMENTS][0]

，但它没有呈现正确的图标

我曾考虑使用

v-for

和

v-if

的组合，但这只是为每个注释呈现了一个图标

不知道我做错了什么

---

编辑：

我对代码进行了以下编辑：

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

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

{{action.article_reference_id}
未读作者评论
| 
有作者的评论吗
| 

但是，它会为每个未读的评论显示一个图标

---

有没有办法只显示一次图标？

在JavaScript中，括号符号不是这样工作的

假设

ACTION\u TYPE\u UNREAD\u AUTHOR\u COMMENTS

为

AUTHOR COMMENTS

，

所需的操作[ACTION\u TYPE\u UNREAD\u AUTHOR\u 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\u reference\u id

为

1831

，结果将是：

actionsRequired[ACTION_TYPE_UNREAD_AUTHOR_COMMENTS][1831] === undefined

它是未定义的，因为上面的数组中没有该名称的属性键。该数组的有效键是

0

、

1

和

2

（对应于索引）

也许这段代码最终是为了确定是否有未读的注释。如果是，则应检查

作者注释

数组是否为非空：

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

---

我已经对原来的问题做了修改，谢谢你的回复direction@MIkeK图标总是出现，因为它同时位于

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>