Vue.js Condition: If contains

Question

I need to create condition in Vue for chcecking if array contains values.

items: { [1,5,8,12,63]}
                <div v-for="item in items">
                        <div v-if="item == 1">
                               Yes
                        </div>
                        <div v-else>
                            No
                        </div>
                </div>

And the output is: Yes, No, No, No, No .

I need to get only Yes and No one time. I need:

Yes, No.

use array method i.e. [].includes(item) ? true : false

Lahori
– Lahori

2018-10-14 13:49:52 +00:00
Commented Oct 14, 2018 at 13:49 — Lahori
– Lahori, Commented Oct 14, 2018 at 13:49

Husam Elbashir · Accepted Answer · 2018-10-14 12:30:32Z

8

v-for will just loop through the array and v-if/v-else will conditionally render the appropriate block of code for every item in the array. What you should do instead is use a method to check if a number is in your items list. You can do that using indexOf..

var app = new Vue({
  el: '#app',
  data: {
    items: [1, 5, 8, 12, 63]
  },
  methods: {
    itemsContains(n) {
      return this.items.indexOf(n) > -1
    }
  }
});

<div id="app">
  <div v-if="itemsContains(1)">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

See this JSFiddle

You can also get rid of the method and do your conditional inline if you want ..

<div id="app">
  <div v-if="items.indexOf(1) > -1">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

edited Oct 14, 2018 at 12:30

answered Oct 14, 2018 at 11:42

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh Mistry · Accepted Answer · 2018-10-14 12:05:27Z

5

var app = new Vue({
  el: '#app',
  data: {
    items: [1, 5, 8, 12, 63]
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

                

<div id="app">

  <div v-if="items.indexOf(1) > -1">
    Yes
  </div>
  <div v-else>
    No
  </div>
 
</div>

edited Oct 14, 2018 at 12:05

answered Oct 14, 2018 at 11:37

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

Collectives™ on Stack Overflow

Vue.js Condition: If contains

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related