Creé un cuadro de diálogo usando vuetify y quiero que se complete previamente con datos en v-select pero está en blanco cuando abro el cuadro de diálogo modal. He asignado propPackage al selectPackage que se usa en v-model en v-select . ¿Cómo debo rellenarlo previamente cuando abro el cuadro de diálogo?
Diálogo
<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>Componente principal
<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>Verifique este codesandbox que hice: https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue
El problema principal es que está intentando acceder al valor de prop directamente en su bloque de datos:
data: () => ({ selectPackage: this.propPackage, }),En este caso, sería mejor obtener el valor de utilería configurando un observador, así:
data: () => ({ selectPackage: '' }), watch: { propPackage(val) { // Be sure to validate default values if(val !== '') { this.selectPackage = val } } },De esta manera, también puede validar el valor de prop si es necesario.
Agregué algunos comentarios más en el Codesanbox sobre las cosas que podrías mejorar. Dado que el componente FormModal funciona principalmente como un cuadro de diálogo, puede usar el accesorio 'valor' y configurar una propiedad calculada para poder cerrar el cuadro de diálogo directamente desde el componente secundario, de esta manera evita emitir un evento @close al componente principal y la advertencia de mutación prop.
Dado que está utilizando funciones de flecha para la sección de datos, this.propPackage no estará definido ya this no se referirá a la instancia de vue. Puedes arreglar eso de 2 maneras:
Cambie la función de flecha a la notación ES6 en su componente de diálogo:
data() { selectPackage: this.propPackage, },Pase la instancia de vue como un parámetro a la función de flecha y acceda a su accesorio usando eso:
data: (instance) => ({ selectPackage: instance.propPackage, }), Una vez que complete su propiedad de datos selectPackage de la manera correcta, su v-select se completará con el valor una vez que abra su cuadro de diálogo.