[Vuejs]-After input search field, fetch new results (nuxt, vuex)

by

0👍

✅

You can pass the postcode through the second argument of your loadAllTutors action (Docs).

store/index.js

loadAllTutors({ commit }, postcode) {
  // ...
}

Then you should create a new method on your page component that you can call to dispatch your store action.

pages/page.vue

methods: {
  async fetchTutors() {
    const postcode = '1111';
    await store.dispatch('loadAllTutors', postcode);
  }
}

Now if you want to trigger your new method through an event like @input on your input element, you can use the event object directly to read the postcode (Docs – const postcode = event.target.value)

If you trigger it through another element (like another button) you could use v-model (Docs) to access your postcode through the data object.

pages/page.vue

// Use with @input="fetchTutors" on textbox (or any other event)
// Must be invoked through the search input element
async fetchTutors(event) {
  await store.dispatch('loadAllTutors', event.target.value);
}

// Use with v-model="postcode" on textbox
// Can be invoked from any element
async fetchTutors() {
  await store.dispatch('loadAllTutors', this.postcode);
}

I hope this solves your issue. How exactly you trigger the method or retrieve your postcode is for you to decide. This is just a basic example.

Leave a comment