Tengo dos páginas vue (usando quasar). Me gustaría usar una matriz de una página como lista desplegable en la otra página. Creo que se pasa como accesorio, pero no puedo descifrar la estructura. No parece una verdadera estructura padre-hijo. La matriz se calcula como una función calculada.
¿Cómo uso la matriz calculada en la página 2 en la función calculada optionsArray como "opciones" dentro de la página 1?
Ver página 1
<template> <form > <q-select :options="options" /> <q-btn label="Save" type="submit" /> </form> </template> <script> export default { name: "AddEntry", props: ["options"], </script>Ver página 2
</template> <script> export default { name: "ListEntries", setup(){ //computed properties const optionsArray = computed( () => (s) => optionsArray.value.filter(stage || !stage ) } } </script>Provide/Inject es lo que estás buscando.
En su Page2.vue, use el método de provide :
<script> import { provide, computed } from "vue"; export default { name: "ListEntries", setup(){ //computed properties const optionsArray = computed( () => (s) => optionsArray.value.filter(stage || !stage ) // this will make optionsArray globally available provide('optionsFromPage2', optionsArray); } } </script> En su Page1.vue, use el método de inject :
<template> <form > <q-select :options="optionsArray" /> <q-btn label="Save" type="submit" /> </form> </template> <script> import { inject } from "vue"; export default { name: "AddEntry", props: ["options"], setup() { // access the options array with inject method const optionsArray = inject('optionsFromPage2') return {optionsArray}; } </script>Debe pasar datos con accesorios, código completo compartido y error de consola si existe