Question

我无法获得复选框的值。

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

我的方法：

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

当它点击时我只得到true而false用于取消选中。 TY

Answer 1

<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>

在你的剧本中：

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)
      }
    }
  }
})

请检查：https://vuejs.org/v2/guide/forms.html#Checkbox

工作小提琴：http://jsfiddle.net/yMv7y/9206/

Answer 2

new Vue({
el: '#app',
data() {
return {
mainCategory: {
merchantIds: []
},
mainCategories: [{
merchantId: 1,
category: 'first category'
},
{
merchantId: 2,
category: 'second category'
}]

}
},
methods: {    
  merchantCategoryId: function() {
    console.log(this.mainCategory.merchantIds)
  }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li v-for="mainCat in mainCategories">
  <input type="checkbox" 
  :value="mainCat.merchantId" 
  v-model="mainCategory.merchantIds" 
  id="mainCat.merchantId" 
  @click="merchantCategoryId">
</li>
</div>

OR

new Vue({
el: '#app',
data() {
return {
mainCategories: [{
merchantId: 1,
category: 'first category'
},
{
merchantId: 2,
category: 'second category'
}]

}
},
methods: {    
  merchantCategoryId: function(event) {
    console.log(event.target.value, event.target.checked)
  }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li v-for="mainCat in mainCategories">
  <input type="checkbox" 
  :value="mainCat.merchantId"
  id="mainCat.merchantId" 
  @change="merchantCategoryId($event)">
</li>
</div>

1。我观察到mainCategories和v-model值v-model =“ mainCategories.merchantId”是相同的。您无法访问mainCategories的marchantId，这是您所做的错误，除了代码示例中没有任何错误以获取marchantId的值。

2在click事件或更改事件函数中使用$ event时，无需使用v-model值。

动态值复选框Vuejs 2

2 个答案: