Home » vue » How to close modal by state in vue

How to close modal by state in vue

Posted by: admin November 26, 2021 Leave a comment


I’m using v-dialog component.I can popup v-dialog by state but can’t close when press close button which have to get value false

Here is my code

<v-dialog :value="productSellingStatus" persistent max-width="290">
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
          <v-btn color="green darken-1" text @click="!productSellingStatus">Disagree</v-btn>
          <v-btn color="green darken-1" text @click="this.dialog=!productSellingStatus">Agree</v-btn>

//in script 
computed: {

I can open modal when my productSellingStatus state become true in mutation


You should have a mutation in the Vuex store…

    [TOGGLE_SELLING_STATUS] (state, bool) {
        state.productSellingStatus = bool

and then toggle it from a method in the component…

toggleSellingStatus (val) {
  this.$store.commit('TOGGLE_SELLING_STATUS', val)


You can also use $store directly.


<v-btn color="green darken-1" text @click="this.dialog=!$store.state.productSellingStatus">Agree</v-btn>