VueJS - Updating a Boolean value in an array

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>

Please provide a [minimal, working example](https://stackoverflow.com/help/minimal-reproducible-example) and show us what you’ve tried and how that failed. Did you get an error message? Was the result not the expected? What did you expect? —— It might help you to know that you have access to the list index in the iterations of `v-for`, cf. https://vuejs.org/v2/guide/list.html — bleistift2, Feb 23 '20 at 13:46

score 0 · Answer 1 · answered Feb 23 '20 at 13:53

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

score 0 · Answer 2 · answered Feb 23 '20 at 13:56

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

VueJS - Updating a Boolean value in an array

2 Answers2