Exploring Vue.js for the first time and hoping to display a login dialog upon button click. To maintain cleanliness in my code, I shifted the dialog to a child component within a parent component with nested LoginDialog. Below are snippets of the parent component code:
<div class="my-2 mx-10">
<v-btn color="#004a04" @click="showLoginDialog">
<p class="my-2">SIGN IN</p>
</v-btn>
</div>
....
showLoginDialog() {
this.loginDialogVisibility = true;
},
login(username, password) {
this.loginDialogVisibility = false;
//login functionality
}
As for the child component:
<template>
<div>
<v-dialog v-model="visibility" max-width="300px">
<v-card class="d-flex flex-column" height="400px">
<v-card-title>
<span class="headline">Sign in</span>
</v-card-title>
<v-col class="d-flex justify-center">
<v-card-text>
<v-text-field v-model="username" label="Username"></v-text-field>
<v-text-field v-model="password" :type="'password'" label="Password"></v-text-field>
</v-card-text>
</v-col>
<v-col class="d-flex justify-center">
<v-card-actions class="card-actions">
<v-btn text color="primary" @click="login">SIGN IN</v-btn>
</v-card-actions>
</v-col>
</v-card>
</v-dialog>
</div>
export default {
name: "LoginDialog",
data() {
return {
username: null,
password: null
}
},
props: {
dialogVisibility: {
type: Boolean,
default: false
}
},
methods: {
login() {
this.visibility = false;
this.$emit("login", this.username, this.password);
}
},
computed: {
visibility() {
return this.dialogVisibility;
}
}
}
</script>
Encountering an issue where the loginDialogVisibility parent variable only changes to false when closing the dialog using the "sign in" button. If closed by clicking on the background, loginDialogVisibility remains true preventing me from re-rendering the modal by clicking the button again. How can I establish proper communication in such situations? What am I missing here?