所以我认为使用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堆栈。
1条答案
按热度按时间gr8qqesn1#
您不需要同时使用
@input
和watch
。使用
watch
:...或
@input
:在组合API
watch
中:.或
@input
: