如何基于方法内的条件隐藏Vue列表中的单个元素？

我有一个循环遍历的items数组，每个元素都有各自的显示条件（依赖应用其他部分的数据）。当前代码如下：

模板代码 #

<template v-for="(item, index) in items">
  <li>
    <i :class="item.iconClass"></i>
    {{ item.name }}
    <strong :class="item.textClass"> {{ item.function }} </strong>
  </li>
</template>

数据定义 #

items: [{
    iconClass: "fas fa-calendar",
    name: 'item1',
    textClass: "text_style",
    function: this.function1
  },
  {
    iconClass: "fas fa-user",
    name: 'item2',
    textClass: "text_style",
    function: this.function2
  }, {
    iconClass: "fas fa-clock",
    name: 'item3',
    textClass: "text_style",
    function: this.function2
  }
]

item1的依赖方法 #

function1() {
  if (this.otherArray.otherItem) {
    return this.otherArray.otherItem
  }
}

当前问题：当otherArray.otherItem不存在（为false）时，item1的函数返回值不显示，但图标和名称仍会展示，因为它们不在方法的条件判断里。

需求：重写逻辑，让条件不满足时隐藏整个列表项，且item2和item3有各自的独立条件，不能在<template>上统一加v-if，必须单独处理每个元素的显示逻辑。

可以通过给每个列表项绑定专属的显示判断逻辑来实现，以下是两种实用方案：

方案一：给每个item添加显示判断方法 #

这种方式结构清晰，后续维护或新增item时更方便：

1. 修改items数组，为每个元素新增shouldShow方法，各自实现专属的显示条件：

items: [{
    iconClass: "fas fa-calendar",
    name: 'item1',
    textClass: "text_style",
    function: this.function1,
    shouldShow: () => !!this.otherArray.otherItem // item1的显示条件：otherItem存在
  },
  {
    iconClass: "fas fa-user",
    name: 'item2',
    textClass: "text_style",
    function: this.function2,
    shouldShow: () => /* 替换成item2的专属条件，比如this.isItem2Visible */ true
  }, {
    iconClass: "fas fa-clock",
    name: 'item3',
    textClass: "text_style",
    function: this.function2,
    shouldShow: () => /* 替换成item3的专属条件，比如this.item3Enabled */ true
  }
]

2. 调整模板，给<li>添加v-if调用当前item的shouldShow方法，同时注意要主动调用item.function()（原写法未执行方法）：

<template v-for="(item, index) in items" :key="index">
  <li v-if="item.shouldShow()">
    <i :class="item.iconClass"></i>
    {{ item.name }}
    <strong :class="item.textClass"> {{ item.function() }} </strong>
  </li>
</template>

方案二：单独编写判断方法，模板中匹配调用 #

如果不想修改items数组结构，可以单独写每个item的判断方法：

1. 在methods中新增三个显示判断方法：

methods: {
  showItem1() {
    return !!this.otherArray.otherItem // item1的显示条件
  },
  showItem2() {
    // 替换成item2的专属条件，比如return this.someData !== null
    return true
  },
  showItem3() {
    // 替换成item3的专属条件，比如return this.someFlag
    return true
  },
  function1() {
    if (this.otherArray.otherItem) {
      return this.otherArray.otherItem
    }
  },
  function2() {
    // 原function2的业务逻辑
  }
}

2. 修改模板，根据item的name或index匹配对应的判断方法：

<template v-for="(item, index) in items" :key="index">
  <li v-if="
    item.name === 'item1' ? showItem1() :
    item.name === 'item2' ? showItem2() :
    showItem3()
  ">
    <i :class="item.iconClass"></i>
    {{ item.name }}
    <strong :class="item.textClass"> {{ item.function() }} </strong>
  </li>
</template>

补充提示 #

• 两种方案都能实现单独控制每个列表项显示的需求，互相不干扰；
• 优先推荐方案一，扩展性更好，新增item时只需在数组中添加对应逻辑；
• 模板中的v-for必须加上:key属性，符合Vue的渲染规范。

内容的提问来源于stack exchange，提问作者Melis