[英]VueJS - Updating a Boolean value in an array
我目前正在使用 VuejS 开发凭证应用程序。 下面我有一个数组,我想知道如何更新这个数组中的布尔值。 当折扣码符合条件时。 希望有人能给我解释一下。
在我的代码中,您可以看到我尝试过的内容(在函数 removeiscount 和 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">
×
</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>
由于您的removeDiscountCode
函数在v-for
循环内,您可以将item
作为函数的参数传递:
// html
<div v-for="item in discountCodes" :key="item.code">
...
<button @click="removeDiscountCode(item)><span>×</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;
}
}
您的问题太难理解了,但您需要精心制作一些答案: 在 JavaScript 对象数组中按 id 查找对象然后您就可以获取您的对象了。 使用 [object].isActive 更改它。 所以,你的答案是
this.discountCodes.find(x => x.code === this.discountInput).isActive = true
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.