如何使用Laravel和Vuejs 3消除axios调用的抖动？

3mpgtkmj 于 2023-10-18 发布在 iOS

关注(0)|答案(1)|浏览(133)

所以我认为使用lodash debounce函数来延迟用户对axios post调用的输入是非常直接的。但我不能让它工作。我在搜索输入上放置了一个watcher，称为搜索。还有一个函数来发出post请求（searchGames），但由于某种原因（没有错误），我无法让debounce内部的函数启动。
起初我以为lodash没有安装，但我已经尝试了一些其他功能，它似乎是工作-所以没有什么错。我也尝试过将axios调用 Package 在一个去抖动函数中，但仍然没有任何运气。

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

我使用Laravel 9与Jetstream和InertiaJS堆栈。

axios

来源：https://stackoverflow.com/questions/71280994/how-to-debounce-axios-call-with-laravel-and-vuejs-3

1条答案

按热度按时间

gr8qqesn1#

您不需要同时使用@input和watch。
使用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>

...或@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>

在组合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>

.或@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>

赞(0）回复(0）举报 2023-10-18

我来回答

如何使用Laravel和Vuejs 3消除axios调用的抖动？

1条答案

相关问题

热门标签

最新问答