Vue component Activation element-ui dialog cannot be turned off?

activate dialog in element-ui in rt,vue component, dialog cannot close

app.vue

    <el-dialog title="" :visible.sync="dialogVisible"></el-dialog>
    
    computed: {
    dialogVisible() {
      return this.$store.state.isDialogVisible;
    }
  }

component:

<el-button @click="showDialog()"></el-button>
methods: {
showDialog() {
  this.$store.commit({ type: "showDialog" });
}

}

in store.js:

    export default new Vuex.Store({
  state: {
    
    isDialogVisible: false
  },
  mutations: {
    showDialog(state) {
      state.isDialogVisible = true;
  }
  

clipboard.png

after activating the component, isDialogVisible maintains the state of true and cannot be closed by clicking on the page. Solve.


is this the effect
https://jsfiddle.net/hs7x03zu/
can take a look at the definition of .sync modifier
ide/components-custom-events.html-sharpsync-%E4%BF%AE%E9%A5%B0%E7%AC%A6" rel= "nofollow noreferrer" > https://cn.vuejs


when you click on the page to close, it actually triggers the event update:visible , which assigns the new value to the bound variable, which is approximately equal to dialogVisible=false , and then your dialogVisible is placed in vuex, so change the way you write it.

//store.js

mutations: {
  hideDialog(state) {
    state.isDialogVisible = false;
}
//app.vue

dialogVisible: {
  get:function(){ 
    return this.$store.state.isDialogVisible; 
  },  
  set:function(val){
    this.$store.commit({ type: "hideDialog" });
  }
}
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-1b3cd87-2b08b.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-1b3cd87-2b08b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?