Using data from one component in dropdown list in vue component-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You must passed data with props, shared whole code and console error if it exist