I've created a dialog box using vuetify and I want it to be prepopulated with data in the v-select but it's blank when I open the dialog modal. I've assigned the propPackage to the selectPackage which is used in v-model in the v-select. How should I prepopulate it when I open the dialog?
Dialog
<template>
<v-row justify="center">
<v-dialog v-model="dialog" max-width="600px" @click:outside="close">
<v-select
:items="['Basic', 'Standard', 'Premium']"
label="Package*"
required
v-model="selectPackage"
></v-select>
<v-btn @click="close"> Close </v-btn>
</v-dialog>
</v-row>
</template>
<script>
export default {
props: {
dialog: {
type: Boolean,
required: false,
default: false,
},
propPackage: {
type: String,
required: true,
},
},
data: () => ({
selectPackage: this.propPackage,
}),
methods: {
close() {
this.$emit("close");
},
},
};
</script>
Parent component
<template>
<v-btn @click="bookDialog('Basic')"></v-btn>
<form-modal :dialog="openDialog" @close="close" :propPackage="propPackage" />
</template>
<script>
import FormModal from "@/components/FormModal.vue";
export default {
components: {
FormModal,
},
data: () => ({
openDialog: false,
propPackage: null,
}),
methods: {
bookDialog(val) {
this.propPackage = val;
this.openDialog = true;
},
close() {
this.openDialog = false;
},
},
};
</script>
Check this codesandbox I made: https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue
The main issue is that you're trying to access the prop value directly on your data block:
data: () => ({
selectPackage: this.propPackage,
}),
In this case, it would be better to get the prop value by setting up a watcher instead, just like this:
data: () => ({
selectPackage: ''
}),
watch: {
propPackage(val) {
// Be sure to validate default values
if(val !== '') {
this.selectPackage = val
}
}
},
This way, you can also validate the prop value if you need to.
I added a few more comments in the codesanbox on things you could improve. Since the FormModal component works mainly as a dialog, you can use the 'value' prop and set up a computed property to be able to close the dialog directly from the child component, this way you avoid emitting a @close event to the parent component and the prop mutation warning.
Since you are using arrow functions for data section, this.propPackage will be undefined since this won't refer to vue instance. You can fix that in 2 ways:
Change the arrow function to ES6 notation in your dialog component:
data() {
selectPackage: this.propPackage,
},
Pass the vue instance as a parameter to arrow function and access your prop using that:
data: (instance) => ({
selectPackage: instance.propPackage,
}),
Once you populate your selectPackage data property the right way, your v-select will be populated with the value once you open your dialog.