VueJS - Обновление логического значения в массиве

Question

Я сейчас работаю над приложением ваучера с VuejS. Ниже у меня есть массив, и я хочу знать, как я могу обновить логическое значение внутри этого массива. Когда код скидки соответствует критериям. Надеюсь, что кто-то может объяснить мне.

В моем коде вы можете увидеть, что я пробовал (в функции удаленного дисконта и контрольного дисконта)

Я ожидаю, что булевы значения в указанном массиве будут установлены в true или false.

removeDiscount должен установить значение в "false" checkDiscount должен установить значение «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

Ваш вопрос слишком сложен для понимания, но вам нужно выработать несколько ответов: Найти объект по идентификатору в массиве JavaScript объектов Тогда вы сможете получить свой объект. Измените его, используя [объект] .isActive. Итак, ваш ответ

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

Answer 2

Поскольку ваша removeDiscountCode функция находится внутри v-for l oop, вы можете передать item в качестве аргумента функции:

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

Для вашей функции checkDiscount, Вы можете установить код поиска в качестве переменной, чтобы изменить его свойство isActive на правильное условие:

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