javascript - VueJS - 如何检查匹配值的数组？

Question

我正在开发一个 couponcode VueJS 应用程序，我想在其中检查具有不同 discountcodes 的数组是否匹配值。下面我有一个包含两个 discountcodes 的数组。如果单击按钮，我想检查数组是否有任何匹配项。我不确定什么是最好的解决方案..

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

Answer 1

A find应该可以。

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

或者正如评论指出的那样可以简化为:

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