Question

当我运行此脚本时：

<div class="description text-left" v-for="cases in siteObject">
  <div class="description text-left" v-for="item in siteObject.cases">
    <small><strong>{{item.x_con_title}}</strong> </small>
  </div>
</div>

我有这个结果：

Closed
Closed
Closed
Open-Dispatch
Closed
Closed
Closed

我不想显示已关闭。我已经尝试过这种情况：

Cases() {
  return this.siteObject.Cases.filter(info => info.x_con_title === "Open-Dispatch");
}

但没有任何变化；我总是有相同的结果

Answer 1

让显示层（模板）通过使用v-if指令进行条件渲染来处理此问题。

<div class="description text-left" v-for="cases in siteObject">
  <div class="description text-left" v-for="item in siteObject.cases">
    <small v-if="item.x_con_title != 'Closed'"><strong>{{item.x_con_title}}</strong> </small>
  </div>
</div>

Answer 2

您需要使用v-if指令来实现所需的功能。另外，不需要外部for循环，因为您对cases并没有做任何事情：

<div v-if="item.x_con_title !== 'Closed'" 
     class="description text-left" v-for="item in siteObject.cases">

    <small><strong>{{ item.x_con_title }}</strong> </small>
</div>

Vue条件显示

2 个答案: