尽管value属性等于true,Vuetify v-dialog也不会显示

时间:2020-02-03 14:05:57

标签: vue.js dialog vuetify.js vue-reactivity

我正在使用vuex存储状态在我的NuxtJS应用中显示/隐藏Vuetify v-dialog。以下是代码摘录:

Vuex商店:

export const state = () => ({
  dialogOpen: false
});

export const mutations = {
  setDialogToOpen(state) {
    state.dialogOpen = true;
  },
  setDialogToClosed(state) {
    state.dialogOpen = false;
  }
};
export const getters = {
  isDialogOpen: state => {
    return state.dialogOpen;
  }
};

对话框组件:

<v-dialog
  v-model="isDialogOpen"
  @input="setDialogToClosed"
  max-width="600px"
  class="pa-0 ma-0"
>
...
</v-dialog>
computed: {
  ...mapGetters("store", ["isDialogOpen"])
},
methods: {
  ...mapMutations({
    setDialogToClosed: "store/setDialogToClosed"
  })
}

这一切都很好,但是当我从一个页面重定向到另一页面时,如下所示,它将停止工作。

this.$router.push("/videos/" + id);

我点击浏览器刷新,它再次开始工作。使用Chrome Vue开发工具,我可以看到商店中以及v-dialog value属性中的状态设置正确,如下所示

在Vuex商店中

enter image description here

v-dialog组件属性中

enter image description here

但是该对话框不可见。有什么线索吗?

我正在使用NuxtJS 2.10.2@nuxtJS/Vuetify plugin 1.9.0

1 个答案:

答案 0 :(得分:1)

问题是由于 <?php if (isset($_POST['order'])) { // Check for pizza size switch ($_POST['size']) { case "Small": $pizzaSizePrice = 6.00; break; case "Medium": $pizzaSizePrice = 8.00; break; case "Large": $pizzaSizePrice = 10.00; break; } // Checking Student Qualification if ($_POST['studentBol'] == "student") { $studentBol = true; } else { $studentBol = false; } // Toppings $toppingArray = $_POST['toppings']; if (count($toppingArray) == 1) { $toppingAmount = 0.00; } else { // First topping free, added toppings an extra $1 $toppingAmount = count($toppingArray) - 1; } // Pickup if ($_POST['modePickup'] == "Delivery") { $modePickup = 5.00; } else { $modePickup = 0.00; } $crustType = 2.00; $numberOfPizza = $_POST['noOfPizza']; $instructions = $_POST['addInstructions']; // Calculating Amount $netAmount = $crustType + $pizzaSizePrice + $toppingAmount; $netAmount = $netAmount * $numberOfPizza; // Adding Delivery Fee $netAmount = $netAmount + $modePickup; if ($studentBol) { $studentDiscount = $netAmount * 10 / 100; // Applying the student discount $netAmount = $netAmount - $studentDiscount; $studentDiscount = number_format($studentDiscount, 2, '.', ''); } // adding tax $salesTax = $netAmount * 10 / 100; $salesTax = number_format($salesTax, 2, '.', ''); $total = $salesTax + $netAmount; $total = number_format($total, 2, '.', ''); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Order Confirmation</title> </head> <body> <h2>Order Confirmation</h2> <hr> <h3>Customer Information:</h3> <h3>First Name:</h3><?php echo $_POST['customer']; ?> <h3>Phone Number:</h3><?php echo $_POST['phoneNumber']; ?> <h3>Address:</h3><?php echo $_POST['address']; ?> <hr> <h3>Size: </h3><?php echo $_POST['size'] . " $" . $pizzaSizePrice; ?> <h3>Crust Type: </h3><?php echo $_POST['crust'] . " $2"; ?> <h3>Toppings: </h3> <?php if (count($toppingArray) == 1) { foreach ($toppingArray as $topping) { echo $topping . " Free<br>"; } } else { foreach ($toppingArray as $topping) { // First topping free if ($topping == "Peperroni") { echo $topping . " Free<br>"; } else { echo $topping . " $1<br>"; } } } ?> <h3>Pizza's Ordered: </h3><?php echo $numberOfPizza; ?> <h3>Additional Instructions:</h3> <?php echo $_POST['addInstructions']; ?> <br> <hr> <h3>Delivery or Pickup: </h3><?php echo $_POST['modePickup'] . " $" . $modePickup; ?> <!-- Check Student Discount --> <?php if ($studentBol) { echo "<br><br>Student Discount: $" . $studentDiscount; } ?> <h3>Sales Tax:</h3> $<?php echo $salesTax; ?> <hr> <h3>Total Due on Delivery: </h3> $<?php echo $total; ?> </body> </html> 没被包裹在v-dialog

我的代码是这样构成的

默认布局

v-app

下面是索引页的代码,该代码页在运行时替换了上面的<template> <div> <v-dialog v-model="isDialogOpen" @input="setDialogToClosed" max-width="600px" class="pa-0 ma-0" > <nuxt /> </div> </template> 标记。

nuxt

因此,在最终代码<template> <v-app> <v-content> ... </v-content> </v-app> </template> 中没有包装v-dialog内。将v-app标记移至v-app布局即可解决

default