Make q-input filter json data from another page

  • 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 {
        api.get("products", {
      per_page: 20,
      .then((response) => {
        // Successful request
        this.results =;
        console.log("Response Status:", response.status);
        console.log("Response Headers:", response.headers);
        console.log("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 = ''" />
    import { openURL } from 'quasar'
    export default {
      name: 'MyLayout',
      data () {
        return {
          leftDrawerOpen: this.$
      methods: {

  • 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:
    2. Event Bus:

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


  • 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.

Log in to reply