An inexplicable event of its own in vue will not be triggered, but an event bound by other elements can trigger it.

problem description

when I click on the real name authentication service agreement, I can click on it for the first time, or the pop-up box of the agreement can appear, but clicking again has no effect. I click on the event of the check box to trigger the pop-up box of the agreement

.

the environmental background of the problems and what methods you have tried

I have removed the classes bound to
< div class= "sim-input-agreen" @ click= "checkAgree" vMutual binding class= "{checked: isChecked}" >
. Clicking on the check box will not show a pop-up box, and clicking on the authentication service agreement will not appear.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< div class= "input-agreen" > < input type= "checkbox" name= "id=" isCheck "/ >
< div class=" sim-input-agreen "@ click=" checkAgree "v < / div >
< label style=" color:https://api-v5.segmentfault.com/question/-sharp676767; "> I have read and agreed to the terms of Real name Certification Service Agreement < / label >
< / div >
< / approve-dialog >

checkAgree controls the event of the check box

checkAgree: function () {

    this.isChecked = !this.isChecked;
 }
 

parent component defines approveDialog in data. Default is false
pop-up box is component

props to receive subcomponents will change the value of props, warning, it should not affect it

what result do you expect? What is the error message actually seen?


is that the first click of the service agreement is intended to pop up normally, but clicking this event again will not work. Click the control check box to control the display of the pop-up box

.
Mar.28,2021

your checkbox directly vMae model = "isChecked" is not good, why bother to use jq to change the attribute.


there are some problems encapsulated by your component
< / approve-dialog >
this approveDialog since it is your sub-component that wants to change it, why not define it as VMAE model = "approveDialog" ? After
is changed to v-model , the code encapsulated by the component also needs to be changed

.
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)"
    >
  `
})

ide/components-custom-events.html-sharp%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model" rel=" nofollow noreferrer "> vue official document-- v-model of custom components
is mainly the following

  model: {
    prop: 'approveDialog',
    event: 'change'
  },
  props: {
    approveDialog: Boolean
  },
Just change it to this.

Menu