CODEWITHSUNDEEP
vue.jsmodal-dialogstatevuexvuetify.js
Caner Ünver
Caner Ünver

Reputation: 61

How to close modal by state in vue

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

Upvotes: 0

Views: 1395

Answers (2)

Pratik Patel
Pratik Patel

Reputation: 6978

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>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362350

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)
},

Upvotes: 3

Related Questions