vue.js - 根据属性有条件地只渲染一次图标

Question

我正在尝试编写一个显示图标 AAA 或图标 BBB 的模板，具体取决于当前迭代中的项目是否具有特定标志。这是我的代码:

<div v-for="(item, itemIndex) in items">
    <div v-if="item.hasUnreadComments">
        <span>Display Icon AAA</span>
    </div>
    <div v-else>
        <span>Display Icon BBB</span>
    </div>
</div>

这里的问题是我需要显示一次图标。如果有多个项目设置为 item.hasUnreadComments === true，图标 AAA 将显示多少次，这不是我想要的。在文档中找不到任何内容，我不想将它绑定(bind)到 v-model。

如果没有第三个数据变量用作标志，这可以在 Vue 中完成吗？

Answer 1

您将不得不进行某种中间转换。 v-if 只是一个灵活的低级指令，它将根据条件隐藏或显示元素。它无法直接处理您期望的数据输出方式。

如果我理解您的要求，您希望图标在列表中只显示一次。您可以预过滤并使用额外的“else”条件。这听起来像是计算属性的用例。您定义一个函数，可以在需要时提供数据的转换版本。

可以通过找到一种方法来简化嵌套的 if/else 来改进此示例，但我认为这现在涵盖了您的用例:

const app = new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          hasUnreadComments: true
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
        {
          hasUnreadComments: true
        },
        {
          hasUnreadComments: false
        },
      ]
    }
  },
  computed: {
    filteredItems() {
      let firstIconSeen = false;
      let secondIconSeen = false;
      return this.items.map(item => {
        if (item.hasUnreadComments) {
          if (!firstIconSeen) {
            item.firstA = true;
            firstIconSeen = true;
          }
        } else {
          if (!secondIconSeen) {
            item.firstB = true;
            secondIconSeen = true;
          }
          secondIconSeen = true;
        }
        return item;
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(item, itemIndex) in filteredItems">
    <div v-if="item.firstA">
      <span>Display Icon AAA</span>
    </div>
    <div v-else-if="item.firstB">
      <span>Display Icon BBB</span>
    </div>
    <div v-else>
      <span>Display no icon</span>
    </div>
  </div>
</div>