VueJS - How to check an array on matching values?

Question

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>

Good answers already, but to explain your problem… in checkDiscount you're comparing this.discountInput === this.discountCode but there is no discountCode. You have discountCodes with an s but not a singular discountCode. checkDiscount needs to iterate the array of discountCodes (with s), and you can't compare discountInput to the array element (let's say "d") because d is an object and the input is a string. To find a match you have to find d.code that matches discountInput. The find and some suggested in answers are a great way to iterate with a lambda. — Stephen P
– Stephen P, Commented Feb 19, 2020 at 20:41

Beyers · Accepted Answer · 2020-02-19 21:00:22Z

4

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

edited Feb 19, 2020 at 21:00

answered Feb 19, 2020 at 20:29

Beyers

9,11847 silver badges59 bronze badges

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

3 Comments

Stephen P Over a year ago

Anything of the form if (condition) { return true; } else { return false; } can always be reduced to return (condition) —— return (this.discountCodes.find(x => x.code === this.discountInput))

Tanner Over a year ago

This could also be written as return !!this.discountCodes.find(x => x.code === this.discountInput)

Beyers Over a year ago

If he wants only true/false then some() is better. Looking at the view template he will probably need to get the actual array element data seeing there's a message field, in which case the above find() example will point him in the right direction.

Boussadjra Brahim · Accepted Answer · 2020-02-19 20:31:52Z

2

Try to use array some method as follows :

 checkDiscount() {

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

        }

answered Feb 19, 2020 at 20:31

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

VueJS - How to check an array on matching values?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related