Comment faire un tableau dans un composant vue?

Question

Mon composant vue comme ceci:

<template> 
    ... 
     <ul class="list-unstyled"> 
      <li v-for="category in categories"> 
       ... 
        <input type="checkbox" :value="category.id" :checked="category.id in_array(categoryCountry)"> 
       ... 
      </li> 
     </ul> 
    ... 
</template> 

<script> 
    export default { 
     props: ['categoryCountry', 'categories'], 
    } 
</script> 

Je souhaite modifier la condition dans l'entrée

categoryCountry est un tableau, par exemple array(1,2,3)

Donc, si category.id dans le tableau de categoryCountry, il va vérifié

Comment puis-je le faire?

Answer 1

La meilleure et la plus simple réponse. en utilisant "includes" il vérifie si les données existent dans le tableau.

exemple:

[].includes(something); 

réponse sur vos codes.

<input type="checkbox" :value="category.id" :checked="categoryCountry.includes(category.id)"> 

Answer 2

utilisant v-si vous pouvez passer une fonction, vous pouvez créer une méthode vue qui vérifie votre tableau comme

checkInArray: (needle, haystack) { 
    return haystack.includes(needle) 
} 

L'entrée sur votre

<input v-if="checkInArray(categoryCountry, categories)" 

Array.prototype.includes() renvoie un booléen vrai/faux qui est suffisant pour satisfaire un v-si conditionnel

Answer 3

Si vous recevez un tableau et que vous devez afficher chaque élément du tableau comme une case à cocher de saisie, vous devez parcourir chaque élément du tableau:

// Template example 
<div id='check_box_sample'> 
    <div v-for="category in categoryCountries"> 
    <input 
     type="checkbox" 
     :id="category" 
     :value="category" 
     v-model="checkedCategories"> 
    <label 
     :for="category"> 
     {{ category }} 
    </label> 
    </div> 
    <br> 
    <span>Checked names: {{ checkedCategories }}</span> 
</div> 

Donc, pour chaque itération sur la v-for="category in categoryCountries" vous créez une case à cocher type d'entrée, vous devez définir un identifiant :id="category" et une valeur :value="category" puisque ce n'est un exemple simple je viens d'utiliser le même élément de tableau.

Vous voudrez peut-être voir un working example

J'espère que cela vous aide.