VueJS2: How to check if array contains specific elements?

Question

I have a Vue application with a series of checkboxes that add items to an array when the user selects a checkbox. There are about 6 items that could be selected, however, I need to reveal a <div> if 2 specific items are selected:

Example array if all elements are checked:

["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"]

But, if ONLY Apples and Pears are checked AND/OR if Apples OR Pears are checked, I need to reveal a div in the view with a set of instructions for the user.

I tried this but it didn't work:

<div v-if="(selectedProducts.length <= 2) && ( selectedProducts.includes('Apples') || selectedProducts.includes('Pears') )">
...show mycontent...
</div>

In my vue instance I have initiated the data like so:

data: {
    selectedProducts: []
}

What's the correct way to write this logic? Should I use the array.every() method in this case? Thank you.

i think you need to replace your or conditional operator with and. || to &&. Because you'd need selected products to include both apples and pears selectedProducts.includes('Apples') && selectedProducts.includes('Pears') also use === 2 instead of length < 3 if you want specifically only the 2 products in question — Jay Lane
– Jay Lane, Commented Sep 13, 2017 at 17:08
my apologies, i just updated the question: I need to check whether BOTh are selected AND/OR if one of the other is checked. Sorry! — redshift
– redshift, Commented Sep 13, 2017 at 17:17
( selectedProducts.includes('Apples') && selectedProducts.includes('Pears')) || ( selectedProducts.includes('Apples') || selectedProducts.includes('Pears') )? But the first statement is redundant because you're displaying the content whether in the case of both being shown or just one of them being shown — Jay Lane
– Jay Lane, Commented Sep 13, 2017 at 17:19

VOL · Accepted Answer · 2017-09-13 17:27:27Z

12

You could try

selectedProducts.indexOf('Apples') !== -1

Instead of

selectedProducts.includes('Apples')

answered Sep 13, 2017 at 17:27

VOL

3092 silver badges10 bronze badges

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

Comments

Bert · Accepted Answer · 2017-09-13 18:46:24Z

If I understand correctly, you want to show the DIV if both apples and pears are selected and only two items are selected, or if one item is selected and the product is either apples or pears.

If that's true, here is a computed that does that.

computed:{
  matched(){
    let pears = this.selectedProducts.includes("Pears")
    let apples = this.selectedProducts.includes("Apples")
    if (this.selectedProducts.length === 2 && pears && apples) return true
    if (this.selectedProducts.length === 1 && (apples || pears)) return true
    return false
  }
}

Working Example:

console.clear()

new Vue({
  el: "#app",
  data:{
    products: ["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"],
    selectedProducts: []
  },
  methods:{
    onChange(evt, product){
      if (evt.target.checked){
        this.selectedProducts.push(product)
      } else {
        this.selectedProducts.splice(this.selectedProducts.indexOf(product), 1)
      }
    }
  },
  computed:{
    matched(){
      let pears = this.selectedProducts.includes("Pears")
      let apples = this.selectedProducts.includes("Apples")
      if (this.selectedProducts.length === 2 && pears && apples) return true
      if (this.selectedProducts.length === 1 && (apples || pears)) return true
      return false
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <div v-for="product in products">
    <label for=""><input type="checkbox" :value="product" @change="onChange($event, product)"> {{product}}</label>
  </div>
  {{selectedProducts}}
  
  <hr>
  <div v-if="matched">
    Matched Criteria
  </div>
</div>

Niklesh Raut · Accepted Answer · 2017-09-13 17:31:17Z

0

You can directly compare like this

 <div v-if="selectedProducts == 'Apples,Pears'  || selectedProducts == 'Apples' ||  selectedProducts == 'Pears' ">
     ...show mycontent...
 </div>

edited Sep 13, 2017 at 17:31

answered Sep 13, 2017 at 17:15

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

1 Comment

redshift Over a year ago

sorry, I had to update my question: I need to check whether BOTh are selected AND/OR if one of the other is checked. Sorry!

Gerald H · Accepted Answer · 2021-08-02 09:11:22Z

0

Hi this should help you to find if a list have a certain element.

    if (cls.attributes.tags.includes("dance")) {
        console.log(cls.attributes.title);
      }

answered Aug 2, 2021 at 9:11

Gerald H

6187 silver badges18 bronze badges

Collectives™ on Stack Overflow

VueJS2: How to check if array contains specific elements?

4 Answers 4

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Related