VueJS2: 어레이에 특정 요소가 포함되어 있는지 확인하는 방법

VueJS2: 어레이에 특정 요소가 포함되어 있는지 확인하는 방법

사용자가 확인란을 선택하면 항목을 배열에 추가하는 일련의 확인란이 있는 Vue 애플리케이션이 있습니다.선택 가능한 아이템은 6개 정도인데, 저는 이 아이템을 공개해야 합니다.<div>2개의 특정 항목을 선택한 경우:

모든 요소가 선택되어 있는 경우의 배열 예:

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

단,Apples그리고.PearsAND/OR가 체크됩니다.Apples또는Pears확인되면, 제가 밝혀야 할 것이 있습니다.div사용자 지시사항 집합과 함께 보기에 표시됩니다.

시도했지만 작동하지 않았습니다.

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

vue 인스턴스에서는 다음과 같이 데이터를 초기화했습니다.

data: {
    selectedProducts: []
}

이 논리를 올바르게 쓰는 방법은 무엇입니까?이 경우 array.every() 메서드를 사용해야 합니까?감사합니다.

시도해 보세요.

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

대신

selectedProducts.includes('Apples')

제가 이해한 바로는, 사과와 배가 모두 선택되고 2개의 아이템만 선택되었을 경우, 또는 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>

이렇게 직접 비교할 수 있습니다.

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

안녕하세요.목록에 특정 요소가 있는지 확인하는 데 도움이 됩니다.

    if (cls.attributes.tags.includes("dance")) {
        console.log(cls.attributes.title);
      }

언급URL : https://stackoverflow.com/questions/46203240/vuejs2-how-to-check-if-array-contains-specific-elements