Make q-input filter json data from another page

[izzy]

I’m trying to look for some examples online but can’t find something specific to my situation. Basically I have a Products.vue page that is returning json data. In MyLayout.vue I have a q-input element that I want to use to filter(search) the json data from Products.vue. I’m not sure how to pass the data so that I can filter the results on the page. Are there any examples of how this is done with Quasar or maybe there is a vue js example that would help me?

Products.vue snippet:

export default {
  name: 'Products',
  data: function(){
    return {
      results:[]
    }
  },
  mounted(){
    api.get("products", {
  per_page: 20,
})
  .then((response) => {
    // Successful request
    this.results = response.data;
    console.log("Response Status:", response.status);
    console.log("Response Headers:", response.headers);
    console.log("Response Data:", response.data);
    console.log("Total of pages:", response.headers['x-wp-totalpages']);
    console.log("Total of items:", response.headers['x-wp-total']);
    
  })

MyLayout.vue snippet

 <q-input dark dense standout v-model="text" input-class="text-right" class="q-ml-md" placeholder="search">
          <template v-slot:append>
            <q-icon v-if="text === ''" name="search" />
            <q-icon v-else name="clear" class="cursor-pointer" @click="text = ''" />
          </template>
        </q-input>



<script>
import { openURL } from 'quasar'

export default {
  name: 'MyLayout',
  data () {
    return {
      leftDrawerOpen: this.$q.platform.is.desktop
    }
  },
  methods: {
    openURL
  }
}
</script>

[s.molinari]

There are two main ways to pass data across non-child components in Quasar (a page isn’t a direct child of the layout).

1. Vuex: https://quasar.dev/quasar-cli/cli-documentation/vuex-store#Introduction
2. Event Bus: https://quasar.dev/options/global-event-bus#Introduction

Also, if your input is filtering the data on QPage, why not just put it on that page?

Scott

[izzy]

It was more of a design choice since I wanted the search filter to be in the navigation bar. But I should probably rethink that. Thank you for the links.