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.

Utilizando datos de un componente en una lista desplegable en un componente de Vue.

02 Jun, 2023 Programación

Tengo dos páginas de Vue (usando Quasar). Me gustaría usar una matriz de una página como lista desplegable en la otra página. Pensaría que se pasa como una propiedad, pero no puedo entender la estructura. No parece ser una estructura real entre padre e hijo. La matriz se calcula como una función computada.

¿Cómo uso la matriz calculada en la página 2 en la función computada “optionsArray” como “opciones” dentro de la página 1?

Página de Vue 1:

<template>
  <form>
    <q-select :options="options"></q-select>
    <q-btn label="Salvar" type="submit"></q-btn>
  </form>
</template>

<script>
export default {
  name: "AddEntry",
  props: ["options"],
};
</script>

Página de Vue 2:

<template></template>

<script>
export default {
  name: "ListEntries",
  setup() {
    // Propiedades computadas

    const optionsArray = computed(() => (s) =>
      optionsArray.value.filter((stage) || !stage)
    );
  },
};
</script>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar la matriz calculada desde la Página 2 a la Página 1 como una propiedad, deberá seguir estos pasos:

    1. En la Página 2, agregue un atributo ref al elemento que contiene la matriz calculada:
    <template>
   <div ref="optionsArrayContainer"></div>
</template>
    1. En las opciones del componente de la Página 2, defina una propiedad computed para la matriz:
    export default {
   name: "ListEntries",
   computed: {
      optionsArray() {
         return // aquí su función de matriz computada
      }
   }
}
    1. En el gancho mounted de la Página 2, obtenga la matriz computada accediendo al ref y guárdela en una propiedad de datos:
    export default {
   name: "ListEntries",
   computed: {
      // ...
   },
   data() {
      return {
         options: []
      }
   },
   mounted() {
      this.options = this.$refs.optionsArrayContainer.optionsArray
   }
}
    1. En la Página 1, pase la propiedad options al componente:
    <template>
   <form>
      <q-select :options="options"></q-select>
      <q-btn label="Guardar" type="submit"></q-btn>
   </form>
</template>
<script>
   export default {
      name: "AddEntry",
      props: ["options"],
   }
</script>

    Esto debería permitirle usar la matriz computada de la Página 2 como una propiedad en el componente de la Página 1.

Comments are closed.