VueJS2：如何检查数组是否包含特定元素？

问题描述：

我有一个Vue应用程序，带有一系列复选框，当用户选择复选框时，这些复选框将项目添加到数组中。有可能被选择的约6项，但是，我需要露出一个<div>如果2特定项目被选择：VueJS2：如何检查数组是否包含特定元素？

例数组，如果所有元件都被检查：

["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"]

但如果只Apples和Pears检查和/或如果Apples或Pears检查，我需要在一组的用户指令的视图，露出了div。

我试过，但没有奏效：

<div v-if="(selectedProducts.length <= 2) && (selectedProducts.includes('Apples') || selectedProducts.includes('Pears'))"> 
...show mycontent... 
</div>

在我VUE情况下我已经开始了数据，像这样：

data: { 
    selectedProducts: [] 
}

什么写这个逻辑的正确方法是什么？我应该在这种情况下使用array.every（）方法吗？谢谢。

我认为你需要更换或有条件的经营者和。 ||至＆＆。因为你需要选择的产品包括苹果和梨selectedProducts.includes（“苹果”）&& selectedProducts.includes（“梨”）也如果想仅特异性的2种产品中使用=== 2而不是长度

我的道歉，我刚刚更新了问题：我需要检查BOTh是否被选中和/或如果其中一个被选中。抱歉! – redshift

（selectedProducts.includes（'Apples'）&& selectedProducts.includes（'Pears'））|| （selectedProducts.includes（'Apples'）|| selectedProducts.includes（'Pears'））？但第一条语句是多余的，因为你要显示的内容是否在这两种情况下所显示或只是被他们展示的一个 –

答

如果我理解正确的，你想显示如果两个苹果的DIV和梨被选中并且只选择两个项目，或者如果选择了一个项目并且该产品是苹果或梨。

如果这是真的，这里是一个计算，做那个。

computed:{ 
    matched(){ 
    let pears = this.selectedProducts.includes("Pears") 
    let apples = this.selectedProducts.includes("Apples") 
    if (this.selectedProducts.length === 2 && pears && apples) return true 
    if (this.selectedProducts.length === 1 && (apples || pears)) return true 
    return false 
    } 
}

工作实例：

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    products: ["Apples", "Bananas", "Cucumbers", "Pears", "Peaches", "Strawberries"], 
 
    selectedProducts: [] 
 
    }, 
 
    methods:{ 
 
    onChange(evt, product){ 
 
     if (evt.target.checked){ 
 
     this.selectedProducts.push(product) 
 
     } else { 
 
     this.selectedProducts.splice(this.selectedProducts.indexOf(product), 1) 
 
     } 
 
    } 
 
    }, 
 
    computed:{ 
 
    matched(){ 
 
     let pears = this.selectedProducts.includes("Pears") 
 
     let apples = this.selectedProducts.includes("Apples") 
 
     if (this.selectedProducts.length === 2 && pears && apples) return true 
 
     if (this.selectedProducts.length === 1 && (apples || pears)) return true 
 
     return false 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/[email protected]"></script> 
 
<div id="app"> 
 
    <div v-for="product in products"> 
 
    <label for=""><input type="checkbox" :value="product" @change="onChange($event, product)"> {{product}}</label> 
 
    </div> 
 
    {{selectedProducts}} 
 
    
 
    <hr> 
 
    <div v-if="matched"> 
 
    Matched Criteria 
 
    </div> 
 
</div>

答

您可以直接比较喜欢这个

<div v-if="selectedProducts == 'Apples,Pears' || selectedProducts == 'Apples' || selectedProducts == 'Pears' "> 
    ...show mycontent... 
</div>

抱歉，我不得不更新我的问题：我需要检查是否都是选择和/或如果其中一个被检查。抱歉! – redshift

不幸的是，这没有奏效。 – redshift

答

你可以尝试

selectedProducts.indexOf('Apples') !== -1

而不是

selectedProducts.includes('Apples')

VueJS2：如何检查数组是否包含特定元素？

相关推荐