VueJS - 更新数组中的布尔值

Question

I'm currently working on a voucher application with VuejS. Below I have an array, and I want to know how I can update the boolean value inside this array. When a discountcode matches the criteria. Hope someone can explain me.

In my code you can see what I tried ( at function removediscount and checkdiscount ).

I'm expecting the booleans in the designated array to be set to true or false.

removeDiscount should set the value to "false"
checkDiscount should set the value to "true"

<template>
    <div class="vouchers">
        <h4 class="mb-2">{{ couponTitle }}</h4>

        {{ couponEmpty }}

        <div class="input-group mb-2">
            <input 
                type="text" 
                :placeholder="couponPlaceholder" 
                aria-label="discountcode" 
                aria-describedby="discountcode" 
                v-model="discountInput"
                v-on:keyup.enter="checkDiscount"
                />

            <button 
                class="btn btn-grey"
                @click="checkDiscount">
                {{ couponButton }}
            </button>
        </div>

        <div v-for="item in discountCodes" :key="item.code">
            <div v-if="item.isActive">
                <transition name="fade">
                    <div class="alert alert-success alert-dismissible fade show mb-2" role="alert">
                        <strong>{{ item.message }}</strong>
                        <button 
                            type="button" 
                            class="close" 
                            data-dismiss="alert" 
                            aria-label="Close"
                            @click="removeDiscountCode"> 
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                </transition>
            </div>
        </div>

        <transition name="fade">
            <div
                v-if="discountInvalid" 
                class="alert alert-danger mb-2"
                :class="{ notinvalid: discountInvalid, 'invalidtest': !discountInvalid }"
                role="alert">
                {{ couponInvalid }}
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'Vouchers',
        props: {
            couponTitle: String,
            couponButton: String,
            couponPlaceholder: String,
            couponInvalid: String
        },
        data: function () {
            return {
                discountInput: '',
                discountInvalid: false,
                discountCodes: [
                    { code: 'test1', message: '10% discount', isActive: true },
                    { code: 'test2', message: '5.- discount', isActive: false },
                    { code: 'test3', message: '10.- discount', isActive: false  },
                ]
            }
        },
        methods: {
            removeDiscountCode() {
                // this should set the isActive to false;
                // this.discountCodes.isActive = false ?
            },

            checkDiscount() {
                this.discountInvalid = false;

                if (this.discountCodes.find(x => x.code === this.discountInput)) {
                    this.discountInput = '';
                    // this should set the isActive to true;
                    // this.discountCodes.isActive = true ?

                } else {
                    this.discountInvalid = true;
                }
            }
        }
    }
</script>

Answer 1

As your removeDiscountCode function is inside the v-for loop, you can pass the item as an argument of the function:

// html
<div v-for="item in discountCodes" :key="item.code">
  ...
  <button @click="removeDiscountCode(item)><span>&times;</span></button>
</div>

// js
removeDiscountCode(item) {
  item.isActive = false
}

For your checkDiscount function, your can set the finding code as a variable to change its isActive property on the right condition:

checkDiscount() {
  this.discountInvalid = false;

  let currentCode = this.discountCodes.find(x => x.code === this.discountInput)
  if (currentCode) {
    this.discountInput = '';
    currentCode.isActive = true
  } else {
    this.discountInvalid = true;
  }
}

Answer 2

Your question is too hard to understand, but you need to craft some answers: Find object by id in an array of JavaScript objects Then you can get your object. Change it using [object].isActive. so, your answer is

this.discountCodes.find(x => x.code === this.discountInput).isActive = true