My setup in the App is quite straightforward, with two main components: The HelloWorld component and a dialog component. The dialog component receives props from the HelloWorld component. The data in the HelloWorld component is rendered by looping over an array. What I am trying to achieve is that when I click on one of the elements, I want the dialog to be pre-filled with the name and age of the respective element. However, I'm unsure how to accomplish this.
You can view the complete setup on this CodeSandbox.
This is my Vuex Store:-
state: {
userData: [
{
name: "Sam",
age: "24"
},
{
name: "Max",
age: "28"
}
],
dialog: false
},
getters: {
getUserData: state => state.userData,
getDialog: state => state.dialog
},
mutations: {
openDialog(state) {
state.dialog = true;
}
}
This is my HelloWorld Component:-
<template>
<v-container>
<v-layout justify-center>
<v-card>
<v-card-text>
<div v-for="user in getUserData" :key="user.age">
<span>{{user.name}}</span>
<span>{{user.age}}</span>
<v-icon @click="openDialog">create</v-icon>
</div>
</v-card-text>
</v-card>
</v-layout>
<Dialog/>
</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import Dialog from "./Dialog";
export default {
name: "HelloWorld",
components: {
Dialog
},
data() {
return {};
},
computed: {
...mapGetters({
getUserData: "getUserData"
})
},
methods: {
...mapMutations({
openDialog: "openDialog"
})
}
};
</script>
This is my Dialog Component:-
<template>
<v-dialog v-model="getDialog" max-width="300px">
<v-card>
<v-card-text>
<v-text-field v-model="title"></v-text-field>
<div class="mt-5">{{age}}</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
title: {
type: String
},
age: {
type: Number
}
},
data() {
return {};
},
computed: {
...mapGetters({
getDialog: "getDialog"
})
}
};
</script>
I appreciate all the assistance. Thank you.