javascript - vue条件显示

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");
}

但没有任何改变；我总是有同样的结果

标签： javascriptvue.js

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>