Vue.js - バイナリ文字列をチェックボックス入力にバインドするコンポーネント

Question

Vue.jsでは、 "111001011"などの1と0の文字列にバインドしてこのデータをユーザに表すコンポーネントを書くにはどうすればいいですか名前付きチェックボックスのセットとして？

Answer 1

多分これはyou'rが探して何です：

App.vue

<template> 
    <div id="app"> 
     <checkboxes :binary="binary"></checkboxes> 
    </div> 
</template> 

<script> 
import Checkboxes from './components/Checkboxes' 

export default { 
    name: 'app', 
    data(){ 
     return { 
      binary: "11001011" 
     }; 
    }, 
    components: { 
     Checkboxes 
    } 
} 
</script> 

Checkboxes.vue：

<template> 
    <div> 
     <ul> 
      <li v-for="position in binary.length"> 
       <label> 
        <input type="checkbox" :name="binary[position - 1]" :checked="binary[position - 1] == '1' ? true : false"> {{ binary[position - 1] }} 
       </label> 
      </li> 
     </ul> 
    </div> 
</template> 

<script> 
export default { 
    name: 'checkboxes', 
    props: { 
     binary: { 
      required: true, 
      type: String 
     } 
    } 
} 
</script> 

これは文字列の長さを通って、各文字のために行くだろうバイナリ値（1/0）に基づいてチェック/チェックされていないとマークされます

結果：