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]的文章参考ID，但未呈现正确的图标。

我当时正在考虑使用v-for和v-if的组合，但这只是为其中的每个注释都提供了一个图标。

不确定我在做什么错

编辑：

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

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

根据数组中某些值的存在情况有条件地渲染图标

1 个答案: