0

rt,vue 组件中激活 element-ui中的 dialog ,dialog 无法关闭

app.vue

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

组件中:

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

}

store.js中:

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

clipboard.png

激活组件以后,isDialogVisible一直保持 true 的状态, 无法通过点击页面来关闭.求解.

2019-02-12 提问
2 个回答
1

点击页面关闭的时候,其实触发了update:visible这个事件,作用是把新值赋值给绑定的变量,大概等于dialogVisible=false,然后你的dialogVisible是放在vuex里的,所以要改变一下写法。

//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" });
  }
}

撰写答案

推广链接