Using data from one component in dropdown list in vue component

Question

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>

saibbyweb · Accepted Answer · 2021-11-24 15:47:34Z

2

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>

answered Nov 24, 2021 at 15:47

saibbyweb

3,3042 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jdost_26 Over a year ago

Thank you so much. Played around with that, but didn't execute it right and thought it wasn't the answer. This works.

saibbyweb Over a year ago

Glat it helped. Adding to the answer, Provide/Inject is also available using Options API. You can read more on this, here: v3.vuejs.org/guide/component-provide-inject.html

Amirani · Accepted Answer · 2021-11-24 15:13:26Z

-1

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

answered Nov 24, 2021 at 15:13

Amirani

191 silver badge4 bronze badges

Collectives™ on Stack Overflow

Using data from one component in dropdown list in vue component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related