我正在使用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商店中
在v-dialog
组件属性中
但是该对话框不可见。有什么线索吗?
我正在使用NuxtJS 2.10.2
和@nuxtJS/Vuetify plugin 1.9.0
答案 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