CODEWITHSUNDEEP
laravelvue.jsaxioslodashvuejs3
Adam
Adam

Reputation: 1299

How to debounce axios call with Laravel and Vuejs 3?

So I thought that it would be pretty straight forward to use lodash debounce function to delay user input on a axios post call. But I cannot get it to work. I have placed a watcher on the search input, that is called search. And a function to make the post request (searchGames), but for some reason (no errors) I cannot get the function inside debounce to fire.

At first I thought that lodash wasn't installed, but I have tried some other functions, and it seems to be working - so nothing wrong there. I have also tried to wrap the axios call in a debounce function, but still without any luck.

<template>
    <Head title="Welcome" />
    <div>
        <input class="mb-2" type="text" v-model="search" placeholder="game name" @input="debounceSearchGames" autofocus>
        <p>Search {{ search }}</p>
        <p v-for="game in games">
            {{ game.title }}
        </p>
    </div>


</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        data(){
            return {
                games: null,
                search: null
            }
        },

        watch: {
            search(){
                _.debounce(() => {
                    this.searchGames(this.search)
                }, 500)
                // this.searchGames(this.search)
            }
        },

        methods: {
            searchGames(string){
                console.log(string)
                axios.post('/games', {
                    title: string
                })
                .then(response => {
                    this.games = response.data
                })
                .catch(error => {
                    console.log(error)
                })
            }
        }
    })
</script>

Im using Laravel 9 with Jetstream and the InertiaJS stack.

Upvotes: 1

Views: 1822

Answers (1)

tao
tao

Reputation: 90013

You don't need both @input and watch.

Either use watch:

Vue.createApp({
  data: () => ({ term: null }),
  methods: {
    search: _.debounce(function () {
      console.log("calling with", this.term);
    }, 456),
  },
  watch: { term: "search" },
}).mount("#app");
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="app">
  <input type="text" v-model="term">
</div>

... or @input:

Vue.createApp({
  methods: {
    search: _.debounce(function (e) {
      console.log("calling with", e.target.value);
    }, 456),
  },
}).mount("#app");
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="app">
  <input type="text" @input="search">
</div>

In Composition API watch:

const { createApp, ref, watch } = Vue;
createApp({
  setup() {
    const searchTerm = ref(null);
    const search = _.debounce(() => {
      console.log("calling with", searchTerm.value);
    }, 456)
    watch(searchTerm, search);
    return { searchTerm };
  },
}).mount("#app");
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="app">
  <input type="text" v-model="searchTerm">
</div>

... or @input:

Vue.createApp({
  setup: () => ({
    search: _.debounce((e) => {
      console.log("calling with", e.target.value);
    }, 456),
  }),
}).mount("#app");
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<div id="app">
  <input type="text" @input="search">
</div>

Upvotes: 4

Related Questions