在vutify中等待警报对话框响应

Question

我有组件Alet.vue[可重用代码]。

<v-dialog v-if="alertDict" v-model="alertDict.showDialog" max-width="460">
<v-card>
<v-card-title>Titile</v-card-title>
<v-card-text>Message</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn olcor="green darken-1" text @click="alertDict.showDialog = false">Ok</v-btn>
<v-btn olcor="green darken-1" text @click="alertDict.showDialog = false">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

另一个组件是Home.vue

<template>
<div>
<Alert
:alertDict="alert_dict"
/>  
</div>
</template>
<script>
import Alert from "../components/Alert";
export default {
methods: {
ClickFunc: function () {
this.alert_dict.showDialog = True
if (User clicked Yes){
console.log("Result")
}
Here I want to wait for users event to know which button is clicked by user.
My Dialogbox is showing. 
}
}

</script>

在这里，我想等待用户事件来知道用户点击了哪个按钮。我的对话框正在显示。

Answer 1

<template>
<v-dialog v-if="alertDict" :value="alertDict.showDialog" max-width="460">
<v-card>
<v-card-title>Titile</v-card-title>
<v-card-text>Message</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn olcor="green darken-1" text @click="onClick('ok')">Ok</v-btn>
<v-btn olcor="green darken-1" text @click="onClick('cancel')">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
methods: {
onClick(value) {
this.$emit('response', value);
}
}
}
</script>

<template>
<div>
<button @click="onClick">show dialog</button>
<Alert
:alertDict="alertDict"
@response="onResponse"
/>  
</div>
</template>
<script>
import Alert from "../components/Alert";
export default {
data() {
return {
alertDict: {
showDialog: false
}
}
},
methods: {
onClick() {
// your ClickFunc
this.alertDict.showDialog = true;
},
onResponse(value) {
console.log(value);
this.alertDict.showDialog = false;
}
}
}
</script>

这里有一些建议，

1. 研究一些编码风格，找到一种对你有意义的风格并遵循它，这样可以提高代码的可读性。例如，命名约定，在函数和变量名的js脚本代码中使用camelcase
   这是你可以研究的博客之一。https://medium.com/javascript-in-plain-english/javascript-naming-convention-best-practices-b2065694b7d
2. 在您的示例中，<警报>是子组件，并且您将alertDict传递到<警报>(儿童(作为道具。然后在<警报>(儿童(
   这在vue是不好的做法。https://v2.vuejs.org/v2/guide/components-props.html#One-数据流方式
   将事件发送到父级并在父级中进行变异，而不是变异道具
   了解vue组件的发射和事件。https://v2.vuejs.org/v2/guide/components.html#Emitting-a值-带事件