如何在单个文件组件中使用新的 Vue？

Question

I'm still learning Vue.js and I have a minor issue: I have a single file component with an array of checkboxes, and I have looked at the documentation for using multiple checkboxes, but the example there requires me to declare:

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

Edit However I have set this up in my single file component within the <script> tag within data(), but it just checks/unchecks all boxes at once (but feeds back true/false correctly):

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

The Question is where and how do I declare the checkbox array so that it reacts/recognises the individual elements?

These are my checkboxes:

 <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

I have assembled a complete example. (I don´t know anything about your language.data object so I´m just using fake 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>

Note that the checkbox values are bound with :value="keyTransPair" . You can change the value to anything you want. This value will be added to the array if the checkbox is checked.

---

By the way: You use <td id="selection"> within the v-for loop. So the id "selection" will not be unique. You should better use a class instead of an id here.