Is it possible to retrieve data from a dialog in the VueJS Vuetify framework? Specifically, how can I access the username or password entered in the NewUserPopup.vue dialog from app.vue?
- App.vue = main template
- NewUserPopup.vue = Dialog template imported in app.vue
The Dialog NewUserPopup.vue:
<template>
<v-dialog v-model="dialog" max-width="600px">
<template v-slot:activator="{ on }">
<v-btn v-on="on" color="primary" class="mb-3">Add new user</v-btn>
</template>
<v-card>
<v-card-title>
<h3 class="primary--text">Add a New User</h3>
</v-card-title>
<v-card-text>
<v-form class="px-3">
<v-text-field label="Username" v-model="username" prepend-icon="account_box"></v-text-field>
<v-text-field label="Firstname" v-model="firstname" prepend-icon="person"></v-text-field>
<v-text-field label="Lastname" v-model="lastname" prepend-icon="person"></v-text-field>
<v-text-field :type="'password'" label="Password" v-model="password" prepend-icon="edit"></v-text-field>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class="primary mx-0 mt-3" @click="submit" >
Add User
<v-icon right>done</v-icon>
</v-btn>
</v-card-actions>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script lang="ts">
export default {
data () {
return{
dialog: false,
username: '',
firstname: '',
lastname: '',
password: '',
}
},
methods:{
submit(){
this.dialog = false;
}
}
}
</script>
The Main App.vue:
<template>
<v-app >
<new-user-popup></new-user-popup>
</v-app>
</template>
<script lang="ts">
import Vue from 'vue';
import NewUserPopup from './components/NewUserPopup.vue'
export default {
name: 'App',
components:{
NewUserPopup
},
data () {
return{
}
},
};
</script>
How can I go about accessing this data?