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

Question

我有一个带有一系列复选框的 Vue 应用程序，当用户选择一个复选框时，这些复选框将项目添加到数组中。大约有 6 个项目可以选择，但是，如果选择了 2 个特定项目，我需要透露一个 <div> ：

如果选中所有元素，示例数组：

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

But, if ONLY Apples and Pears are checked AND/OR if Apples OR Pears are checked, I need to reveal a div 在视图中为用户提供一组说明。

我试过这个但没有用：

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

在我的 vue 实例中，我已经像这样启动了数据：

 data: {
    selectedProducts: []
}

编写此逻辑的正确方法是什么？在这种情况下我应该使用 array.every() 方法吗？谢谢你。

原文由 redshift 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我理解正确的话，如果同时选择了苹果和梨并且只选择了两个项目，或者如果选择了一个项目并且产品是苹果或梨，您想要显示 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/vue@2.4.2"></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>

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以试试

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

代替

selectedProducts.includes('Apples')

原文由 VOL 发布，翻译遵循 CC BY-SA 3.0 许可协议