如何在 Vue 2 中等待用户输入答案

【问题标题】：how to wait for user input in Vue 2如何在 Vue 2 中等待用户输入
【发布时间】：2021-08-13 00:05:26
【问题描述】：

我想等待用户输入，并在用户停止输入后立即进行搜索。我正在使用与数据网格通信的过滤器组件。一旦用户完成输入或选择多项选择的选项，就会执行搜索（过滤）。

我尝试使用 lodash 的 debounce，但无法使用。

data() {
  nameOrCpfDebounce: ""
}

methods: {
    nameOrCpfDebounce: function() {
      this.nameOrCpfDebounce = debounce(
        value => (this.filters.nameOrCpf = value),
        3000
      );
    },
}

&lt;TextField label="Nome ou CPF" @input="nameOrCpfDebounce" /&gt;

【问题讨论】：

标签： vue.js vuejs2 debounce

【解决方案1】：

你可以像这样写一个简单的lazyCaller函数：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    timeout: null,
    inputValue: '',
  },
  methods: {
    lazyCaller(value, time = 500) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.inputValue = value;
      }, time)
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<div id="app">
  <label for="name">input witth delay</label>
  <input :value="inputValue" type="text" name="name" @input="lazyCaller($event.target.value)">

  <div>
    <p>typed value will appear after 500ms:</p>
    <p>{{ inputValue }}</p>
  </div>
</div>

它的工作原理如下：

@input 你将输入的值传递给 lazyCaller 函数
在函数中，它首先使用data 对象中timout 变量中保存的超时ID 清除上次超时，这样上次超时就不会再执行了
然后它在timeout 变量中存储一个新的超时ID，在setTimeout 的回调函数中，你可以做任何你想做的事情，在你的情况下使用键入的值进行搜索，但在这里我只是更新@ 987654330@ 在data
lazyCaller 接受第二个参数来设置超时延迟，我将其默认设置为 500 毫秒，因此您可以在这里轻松看到效果，但在您的情况下，我认为 250 或 300 毫秒的延迟就足够了
只要用户继续输入，什么都不会发生，因为每次按键输入都会清除最后一次超时，但如果用户停止输入 500 毫秒（在我的示例中），最后一次超时不会被清除并被执行

【讨论】：

【解决方案2】：

这对你有帮助吗？

如果这不起作用，请提供更多详细信息。

<template>
  <TextField
    label="Nome ou CPF"
    :value="value"
    @input="value => {
      nameOrCpf = value;
      myDebounce();
    }"
  />
</template>

<script>
const { debounce } = require("lodash");

export default {
  name: "FilterTable",
  data() {
    return {
      nameOrCpf: "",
      myDebounce: null
    };
  },
  created() {
    this.myDebounce = debounce(() => this.search(), 1000)
  },
  methods: {
    async search() {
      const response = await axios.get('...');
    }
  }
}
</script>

祝你有美好的一天！ ?

【讨论】：