es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Asignación de datos a campos al abrir un diálogo en Vuetify.

31 May, 2023 Programación

He creado una caja de diálogo con vuetify y quiero que esté prellenada de datos en el v-select, pero está vacía cuando abro el cuadro de diálogo modal. He asignado la propPackage al selectPackage que se usa en v-model en el v-select. ¿Cómo debo prellenarlo cuando abro el 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 padre:

<template>
 <v-btn @click="bookDialog('Basic')"></v-btn>
 <form-modal :dialog="openDialog" @close="close" :proppackage="propPackage"></form-modal>
</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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para prellenar el v-select con los datos de propPackage al abrir el cuadro de diálogo modal, se necesita usar el método del ciclo de vida created() para establecer el valor predeterminado de selectPackage como el valor de propPackage. Aquí está un fragmento de código actualizado para el componente secundario:

    <template>
  <v-row justify="center">
    <v-dialog v-model="dialog" max-width="600px" @click:outside="close">
      <v-select :items="['Basic', 'Standard', 'Premium']" label="Paquete*" required="" v-model="selectPackage"></v-select>
      <v-btn @click="close"> Cerrar </v-btn>
    </v-dialog>
  </v-row>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      required: false,
      default: false,
    },
    propPackage: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      selectPackage: null,
    };
  },
  created() {
    this.selectPackage = this.propPackage;
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

    Al establecer la propiedad de datos selectPackage a this.propPackage en el método del ciclo de vida created(), el v-select estará prellenado con el valor de propPackage al abrir el cuadro de diálogo modal.

Comments are closed.