vue中莫名的自己的事件不会触发，其他元素绑定的事件却能触发该事件

Question

问题描述

我点击实名认证服务协议 第一次是可以点击，也可以出现协议的弹框 但是再次点击没有效果 我点击复选框的事件可以触发协议的弹框出现

问题出现的环境背景及自己尝试过哪些方法

我把
<div class="sim-input-agreen" @click="checkAgree" v-bind:class="{checked: isChecked }">
上面绑定的类去了，点击复选框也是不会出现弹框的，点击认证服务协议也不会出现。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="input-agreen"><input type="checkbox" name="" id="isCheck"/>
<div class="sim-input-agreen" @click="checkAgree" v-bind:class="{checked: isChecked }"></div>
<label style="color:#676767;">我已阅读并同意实名认证服务协议的条款</label>
</div>
<approve-dialog :approveDialog="approveDialog"></approve-dialog>

checkAgree 控制复选框的事件

checkAgree: function () {

    this.isChecked = !this.isChecked;
 }
 

父组件在data中定义approveDialog默认是false
弹框是组件

props来接收 子组件会改变props的值，警告，应该是不会影响吧

你期待的结果是什么？实际看到的错误信息又是什么？

就是这个 第一次点击服务协议 是刻意正常出来弹框 但是再次点击这个事件就不起作用了 点击控制复选框确可以控制弹框的显示

Answer 1

你的 checkbox 直接 v-model="isChecked" 不就好了，何必这么麻烦还用 jq 去改属性。

Answer 2

你组件封装的有些问题
<approve-dialog :approveDialog="approveDialog"></approve-dialog>
这个approveDialog既然是你子组件想去改变他，为什么不改成v-model="approveDialog"这样子去定义呢？
改成v-model之后，组件封装的代码也需要改

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

vue官方文档——自定义组件的-v-model
主要是下面这点

  model: {
    prop: 'approveDialog',
    event: 'change'
  },
  props: {
    approveDialog: Boolean
  },

改成这样就行了。