[Vuejs]-How to use new Vue in a single file component?

2šŸ‘

āœ…

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.

šŸ‘¤Sebastian

Leave a comment