如何在vue中按状态关闭模态

Question

我正在使用 v-dialog component.I 可以按状态弹出 v-dialog 但在按下关闭按钮时无法关闭，必须获得值 false

这是我的代码

<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"])

当我的 productSellingStatus 状态在突变中变为真时，我可以打开模式

Answer 1

你应该在 Vuex store 中有一个 mutation...

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

然后从组件中的方法切换它...

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

Answer 2

您也可以直接使用$store。

$store.state.productSellingStatus=false

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

如何在vue中按状态关闭模态

How to close modal by state in vue

state

modal-dialog

vue.js

vuex

vuetify.js