新しいVueを1つのファイルコンポーネントで使用するには？

Question

私はまだVue.jsを学んでいますが、私は小さな問題があります： 私はチェックボックスの配列を持つ単一のファイルコンポーネントを持っており、複数のチェックボックスを使用するためにdocumentationを見ましたが、 ：

new Vue({ 
    el: '#example-3', 
    data: { 
    checkedNames: [] 
    } 
}) 

編集私はデータ（）内の<script>タグ内に私の単一ファイルのコンポーネントでこれを設定したが、それだけでチェック/チェックを解除すべてのボックスを一度に（しかし正確に偽/バック真フィード）しているが ：

<script> 
 
    export default { 
 
    name: 'PhrasesDetail', 
 
    data() { 
 
     return { 
 
     game: '', 
 
     language: '', 
 
     checkedPhrasesArr: { 
 
      el: '#selection', 
 
      data: { 
 
       checkedPhrasesArr: [] 
 
      } 
 
      } 
 
     } 
 
    }, 
 
... 
 
</script>

質問はとそれがどのように反応するように、私は、チェックボックスの配列を宣言します/ 個々要素を認識？ですか

これらは私のチェックボックスです：

<tr v-for="(keyTransPair, index) in this.language.data"> 
     <td id="selection"><input type="checkbox" :id="index" v-model="checkedPhrasesArr"></td> 
     <td>{{index}}</td> 
... 
</tr> 

Answer 1

私は完全な例を組み立てています。 （私はあなたのlanguage.dataオブジェクトについて何も知らないので、私はちょうど偽のデータを使っています）。

<template> 
    <div> 
    <!-- Your Checkboxes --> 
    <table> 
     <tr v-for="(keyTransPair, index) in language.data"> 
     <td id="selection"><input type="checkbox" :value="keyTransPair" :id="index" v-model="checkedPhrasesArr"></td> 
     <td>{{index}}</td> 
     </tr> 
    </table> 

    <!-- Show the selected boxes --> 
    {{ checkedPhrasesArr }} 
    </div> 
</template> 

<script> 
export default { 
    name: 'HelloWorld', 
    data() { 
    return { 
     // Your language data 
     language: { 
     data: { 
      keyOne: "one", 
      keyTwo: "two", 
      keyThree: "three" 
     } 
     }, 

     // The Checkbox data 
     checkedPhrasesArr: [] 
    } 
    } 
} 
</script> 

チェックボックスの値が:value="keyTransPair"にバインドされていることに注意してください。値を必要なものに変更することができます。チェックボックスをオンにすると、この値が配列に追加されます。ところで

---

：あなたはv-forループ内<td id="selection">を使用しています。したがって、id "selection"は一意ではありません。ここでIDの代わりにクラスを使うのがよいでしょう。