文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用Laravel和Vuejs 3来揭穿axios调用？

问如何用Laravel和Vuejs 3来揭穿axios调用？
EN

Stack Overflow用户

提问于 2022-02-26 23:16:43

回答 1查看 834关注 0票数 1

因此，我认为，使用函数来延迟用户在axios调用上的输入是非常直接的。但我不能让它起作用。我在搜索输入上放置了一个watcher，即搜索。和一个函数来发出post请求(searchGames)，但是由于某些原因(没有错误)，我无法让函数内部退出触发。

一开始我以为房源没有安装，但我尝试了一些其他功能，而且它似乎在工作，所以没有什么问题。我还试图将axios调用封装在一个反函数中，但仍然没有任何结果。

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

我在Jetstream和InertiaJS堆栈中使用Laravel 9。

lodash

vuejs3

laravel

vue.js

axios

回答 1

Stack Overflow用户

发布于 2022-02-27 02:48:59

你不需要@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.value, 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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71280994

复制

相似问题

问如何用Laravel和Vuejs 3来揭穿axios调用？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用Laravel和Vuejs 3来揭穿axios调用？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用Laravel和Vuejs 3来揭穿axios调用？
EN