CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Newland
Newland

Reputation: 55

VueJS - How to check an array on matching values?

I'm working on a couponcode VueJS app, in which I want to check an array with different discountcodes on matching values. Below I have an array with two discountcodes. If the button is clicked, I want to check the array for any matches. I am not sure what would be the best solution for this..

<template>
    <div class="container">

        <input placeholder='type discount' v-model="discountInput">
        <button @click="checkDiscount">check for discount</button>

        <span class="alert" v-if="discountValid">
            Code juist
        </span>

        <span class="alert" v-if="discountInvalid">
            Code onjuist
        </span>

    </div>
</template>

<script>

  export default {

    props: {

    },

    data: () => {
        return {
            discountInput: '',
            discountValid: false,
            discountInvalid: false,
            discountCodes: [
                { code: 'discount-code-1', message: '10% discount' },
                { code: 'discount-code-2', message: '5 dollar discount' }
            ]

        }
    },
    components: {

    },
    methods: {

        checkDiscount() {
            if (this.discountInput === this.discountCode) {
                return true;
            } else {
                return false;
            }
        }

    },
    watch: {

    }
}
</script>

Upvotes: 2

Views: 2322

Answers (2)

Beyers
Beyers

Reputation: 9108

A find should work.

  checkDiscount() {
    if (this.discountCodes.find(x => x.code === this.discountInput)) {
      return true;
    } else {
      return false;
    }
  }

or as comments pointed out could be reduced to:

  checkDiscount() {
    return !!this.discountCodes.find(x => x.code === this.discountInput);
  }

Upvotes: 4

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to use array some method as follows :

 checkDiscount() {

            return this.discountCodes.some(dis => dis.code === this.discountInput)

        }

Upvotes: 2

Related Questions