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

Questions:

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>
        <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-card-actions>
          <v-spacer></v-spacer>
          <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>
        </v-card-actions>
      </v-card>
    </v-dialog>


//in script 
computed: {
        ...mapState(["productSellingStatus"]) 

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

Answers:

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.

$store.state.productSellingStatus=false

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