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

.
Vue.js
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.

Previous: How to destroy the page before the jump for vue multi-page application

Next: Help me to see a regular Bug, solution.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb0e7a-2311.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb0e7a-2311.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?