vueコンポーネントで配列を作成するにはどうすればよいですか？このような

Question

マイVUEコンポーネント：

<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> 

私はcategoryCountryの配列にcategory.id場合

categoryCountryが、それは、その後、配列、ですから、例えばarray(1,2,3)

で入力して条件を変更したいですチェックされます

どうすればいいですか？

Answer 1

最高で簡単な答えです。 "includes"を使用すると、配列にデータが存在するかどうかがチェックされます。

例：あなたのコードの

[].includes(something); 

答え。

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

Answer 2

そんなに関数を渡すことができれば、vは-、あなたの入力に

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

のようなあなたのアレイをチェックしVUEでの方法を作ることができます使用して

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

Array.prototype.includes （）は、条件付きのv-ifを満たすのに十分な真偽値を返します。

Answer 3

配列を受け取った場合、配列の各項目を入力チェックボックスとして表示する必要がある場合は、配列項目：上の各反復のためにそう

// 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> 

v-for="category in categoryCountries"あなたは、これは私がちょうど同じ配列項目のみを使用簡単な例であることから、ID :id="category"と値:value="category"を定義する必要があり、入力タイプのチェックボックスを作成します。

あなたは、私は、これはあなたを助けることを願っていworking example

を見てみたいことがあります。