lundi 23 octobre 2017

How to use new Vue in a single file component?

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: []
  }
})

However if I do this in my single file component within the <script> tag either as its own thing or within data(), I get a 'Do not use 'new' for side effects' linting error (and I understand why).:

<script>
  import Vue from 'vue'

  new Vue({
    el: '#selection',
    data: {
      checkedPhrasesArr: []
    }
  })

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

The Question is where and how do I declare the checkbox array so that it reacts/recognises changes in the html?

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></td>
 ...
 </tr>




Aucun commentaire:

Enregistrer un commentaire