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（）方法嗎？謝謝。

來源

2017-09-13 redshift

我認爲你需要更換或有條件的經營者和。 ||至＆＆。因爲你需要選擇的產品包括蘋果和梨selectedProducts.includes（「蘋果」）&& selectedProducts.includes（「梨」）也如果想僅特異性的2種產品中使用=== 2而不是長度<3問題 –

我的道歉，我剛剛更新了問題：我需要檢查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>

來源

2017-09-13 18:46:24 Bert

您可以直接比較喜歡這個

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

來源

2017-09-13 17:15:03 C2486

抱歉，我不得不更新我的問題：我需要檢查是否都是選擇和/或如果其中一個被檢查。抱歉! – redshift

不幸的是，這沒有奏效。 – redshift

你可以嘗試

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

而不是

selectedProducts.includes('Apples')

來源

2017-09-13 17:27:27 VOL

VueJS2：如何檢查數組是否包含特定元素？

回答

相關問題