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

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

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>