La Valeur Dynamique Case Vuejs 2

Je ne peux pas obtenir la valeur de la case.

<li v-for="mainCat in mainCategories">
  <input type="checkbox" :value="mainCat.merchantId" v-model="mainCategories.merchantId" id="mainCat.merchantId" @click="merchantCategoryId">
</li>

Mes Méthodes:

methods: {    
  merchantCategoryId: function() {
    console.log(this.mainCategories.merchantId)
  }
}

Quand il clique sur je ne reçois que le vrai et le faux pour la décocher. TY

InformationsquelleAutor Rbex | 2017-05-05
  1. 9
    <div id="demo" >
  <ul>
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.merchantId" :id="mainCat.merchantId" v-model="checkedCategories" @click="check($event)"> {{mainCat.merchantId}}
    </li>
  </ul>
  {{ checkedCategories }}
</div>

    Et dans votre script:

    var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
        merchantId: '1'
      }, {
        merchantId: '2'
      }] 
  },
  methods: {
    check: function(e) {
      if (e.target.checked) {
        console.log(e.target.value)
      }
    }
  }
})

    Vérifier: https://vuejs.org/v2/guide/forms.html#Checkbox

    De travail violon: http://jsfiddle.net/yMv7y/9206/

    • C'est la valeur de mon mainCategories est venu à partir de la base de données et je l'affiche en v-pour. Le but de @clic pour déclencher une méthode et obtenir la valeur de la case sélectionnée. TY pour votre réponse.
    • Mais qui peut être atteint sans le @clic.
    • J'ai besoin pour atteindre en cliquant sur parce que je vais envoyer l'Id dans la base de données.
    • C'est ce que je suis à la recherche, à l'exemple de la doc n'a pas de if (e.target.checked) { console.log(e.target.value) }. TY @Deepak vous me sauve des tonnes de temps.
    • Content d'avoir pu aider!
    • Je ne vois pas pourquoi vous avez deux :la valeur et v-modèle à l'entrée - le :la valeur n'est pas utile.
    • Ne pas les id être dynamique ici? c'est à dire ":id=" vs juste "id="?
    • Oui. Bonne prise. Réponse De Mise À Jour. Merci @Shaun

    InformationsquelleAutor Deepak