I have two vue pages (using quasar). I would like to use an array from one page as a dropdown list in the other page. I would think it is passed as a prop, but I can't figure out the structure. It doesn't seem like a true child-parent structure. The array is calculated as a computed function.
How do I use the array calculated in Page 2 in the computed function optionsArray as "options" within Page 1?
Vue Page 1
<template>
<form >
<q-select
:options="options"
/>
<q-btn label="Save" type="submit" />
</form>
</template>
<script>
export default {
name: "AddEntry",
props: ["options"],
</script>
Vue page 2
</template>
<script>
export default {
name: "ListEntries",
setup(){
//computed properties
const optionsArray = computed(
() => (s) =>
optionsArray.value.filter(stage || !stage
)
}
}
</script>
Provide/Inject is what you're looking for.
In your Page2.vue, use the provide method:
<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>
In your Page1.vue, use the inject method:
<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>
You must passed data with props, shared whole code and console error if it exist