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 {
          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>
    
    


  • 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



  • 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