Vue conditional display

Question

When I run this script :

<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>

I have this result :

Closed Closed Closed Open-Dispatch Closed Closed Closed

I don't want to show the closed. I have tried with this condition:

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

but nothing changes; I have always the same result

Welcome to Stack Overflow! Please post a minimal reproducible example of your attempt, noting input and expected output. - You can use the <> snippet editor and include vue.js — mplungjan
– mplungjan, Commented Jul 17, 2018 at 5:44
is it siteObject.cases or siteObject.Cases ? .. better name this computed property Cases() (if what's what it is) differently to avoid confusion and make it easier for yourself (because you already have a value siteObject.Cases I assume - the full list), you can name this one something like: filteredCases() { ... }. you filter method is ok btw — Ovidiu Dolha
– Ovidiu Dolha, Commented Jul 17, 2018 at 5:46
Why do you loop cases in siteObject and then item in siteObject.cases? Do you mean item in cases instead? — str
– str, Commented Jul 17, 2018 at 5:51

tony19 · Accepted Answer · 2022-07-15 22:44:44Z

Let the display layer (the template) handle this by using v-if directive for conditional rendering.

<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>

Harshal Patil · Accepted Answer · 2018-07-17 05:51:59Z

You need to use v-if directive to achieve what you need. Also, your outer for loop is unnecessary since you are not doing anything with 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>

Collectives™ on Stack Overflow

Vue conditional display

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related