VueJS - 更新数组中的布尔值答案

【问题标题】：VueJS - Updating a Boolean value in an arrayVueJS - 更新数组中的布尔值
【发布时间】：2020-06-07 07:19:27
【问题描述】：

我目前正在使用 VuejS 开发优惠券应用程序。下面我有一个数组，我想知道如何更新这个数组中的布尔值。当折扣代码符合条件时。希望有人能给我解释一下。

在我的代码中，您可以看到我尝试过的内容（在函数 removediscount 和 checkdiscount 处）。

我希望将指定数组中的布尔值设置为 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>

【问题讨论】：

请提供minimal, working example 并向我们展示您尝试了什么以及失败的原因。你收到错误信息了吗？结果不是预期的吗？你期待什么？ —— 这可能会帮助您知道您可以访问v-for 的迭代中的列表索引，参见。 vuejs.org/v2/guide/list.html

标签： javascript arrays vue.js object

【解决方案1】：

由于您的 removeDiscountCode 函数在 v-for 循环内，您可以将 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;
  }
}

【讨论】：

【解决方案2】：

您的问题太难理解了，但您需要精心设计一些答案： Find object by id in an array of JavaScript objects 然后你可以得到你的对象。使用 [object].isActive 更改它。所以，你的答案是

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

【讨论】：