复选框中的Vuejs单击事件？

Question

我在复选框上有一个 v-model，它的值是从循环中分配的。我希望点击事件调用一个我需要访问已检查数据的函数。当点击被触发时，如果我记录状态，它不会打印复选框的当前点击数据。它打印先前单击的复选框数据。是否必须在函数中传递事件并访问数据？

 <div id="demo">
  <ul>
    <li v-for="mainCat in mainCategories">
      <input
        type="checkbox"
        :value="mainCat.merchantId"
        id="mainCat.merchantId"
        v-model="checkedCategories"
        @click="check(checkedCategories)"
      >
      {{mainCat.merchantId}}
    </li>
  </ul>
  {{ checkedCategories }}
</div>

脚本：

 var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
      merchantId: '1'
    }, {
    merchantId: '2'
    }] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
    console.log(this.checkedCategories,e)
    }
  }
})

Js小提琴：http: //jsfiddle.net/bmpfs2w2/

原文由 phantom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 @change 代替 @click 。在值真正改变之前触发点击事件。

 <input type="checkbox"
  :value="mainCat.merchantId"
  id="mainCat.merchantId"
  v-model="checkedCategories"
  @change="check($event)"
>

http://jsfiddle.net/eLzavj5f/

原文由 ittus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您希望在更改值 后 调用该函数，您可以将处理程序功能包装在 this.$nextTick() 中。您可以 阅读 $nextTick ，但要点是

推迟在下一个 DOM 更新周期后执行的回调。在您更改一些数据以等待 DOM 更新后立即使用它。

因此，您的处理程序将在 DOM 更新后被调用，也就是在您的状态发生更改并且效果已反映在 DOM 中之后。

 <input
  type="checkbox"
  :value="mainCat.merchantId"
  id="mainCat.merchantId"
  v-model="checkedCategories"
  @change="check($event)"
>

// ...

check (e) {
  this.$nextTick(() => {
    console.log(checkedCategories, e)
  })
}

原文由 Grant 发布，翻译遵循 CC BY-SA 4.0 许可协议