时间戳

首页 > 解决方案 > @input 指令：等待用户完成他的查询

vue.js - @input 指令：等待用户完成他的查询

问题描述

我的 vue 学习曲线：我注意到输入文件通过 ajax (axios) 向 YouTube 发送一个调用，每个键输入到 inout 文件中。因此，它已经在 Youtube 搜索 APi 中执行了搜索。我猜想使用这种方法通过关键字等搜索数据库，这本来可以很好地工作，但是当使用 YouTube 视频等 API 时，如果它可以等到用户完成他的搜索查询，它应该会更好。所以我的问题是有一个指令或任何其他方式来强制 API 调用等待用户完成他的搜索查询，然后再在 YouTube 中运行调用？顺便说一句，在测试时，我在 1 小时内超过了 YouTube API 的 1,000 个限制。

这是 App.vue

<template>
  <SearchBar @emitTermSearch="onTermSearch"></SearchBar>
  <VideoList :videos="videos"></VideoList>
</template>

<script>
import axios from "axios";
import SearchBar from "./components/SearchBar";
const API_KEY = "hidden";
export default {
  name: "App",
  components: {
    SearchBar
  },
  data() {
    return {
      videos: []
    };
  },
  methods: {
    onTermSearch(emitTermSearch) {
      axios
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: {
            key: API_KEY,
            type: "video",
            part: "snippet",
            maxResults: 2,
            order: "date",
            q: emitTermSearch
          }
        }.then(response => {
          this.videos = response.data.items;
        }).catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

这是 SearcBar.vue

<template>
  <h1>Please Search</h1>
  <div id="searchbar">
    <input @input="onInput" />
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  methods: {
    onInput(event) {
      this.$emit("emitTermSearch", event.target.value);
    }
  }
};
</script>

标签： vue.jsvuejs3

解决方案

代替onInputon ，您可以在（或其他键）@input上发出您的事件，或者添加一个带有事件的按钮。@keyup.enter@click

另一种方法是设置超时：

onInput(event) {
  setTimeout(() => {
    this.$emit("emitTermSearch", event.target.value);
  }, 700)
}

推荐阅读