Javascript Vue事件发射不值

时间:2018-10-11 03:34:50

标签: javascript vue.js emit

晚上好

有人知道为什么在将输入切换开关值发送到父组件时将其翻转为反向值吗?我是Vue的新手,现在已经使用Vue了几天。它在概念上起作用,我可以使用vue dev工具在两个区域中看到属性的值。但是,子级值在发射给父级并分配后会反转。通过输入值,我可以立即解决问题,但是我想知道是否有人知道为什么会发生这种情况。

父更新绑定

updateMiddle(article){
  this.article.meta_title = article.meta_title;
  this.article.meta_desc = article.meta_desc;
  this.article.published = article.published;
  this.article.is_review = article.is_review;
}

儿童发射

methods: {
  update() {
    this.$emit('changeMiddle',this.article)
  }

输入

<input id="tc-review" type="checkbox" hidden="hidden" name="is_review" 
       v-model="article.is_review" v-on:input="update">

1 个答案:

答案 0 :(得分:0)

问题是 input 事件在v-model绑定更改数据之前触发。

简单的解决方案是改用 change 事件。例如

<input v-model="article.is_review" @change="update">

简化的演示〜http://jsfiddle.net/u20h5tzv/

提示:尝试将其更改回@input并查看时间上的差异。