How to make a mockery (consult only after you finish typing in the input) in VUEJS?

Asked

Viewed 402 times

0

I come from Angularjs and, at certain times, when I need to make a query according to what the user is searching, I use ng-change, but I agree with him ng-model-options="{debounce: 500}". This makes the angular queries do not trigger queries as crazy on my server, but causes the search to be done only when you stop typing.

I wanted to do the same thing with Vue, but the option debounce was depreciated in version 2.0+.

What now? How could I do in Vuejs to be able to run a @input only when the user stops typing?

There’s that in Vuejs ready, or I’ll have to do "in hand"?

Example:

<input type="text" 
  v-model="pesquisa.nome" 
  @input="consultarSoQuandoPararDeDigitar()" />
vue.js vue.js-2
  • 1

    In "pure" Vue no longer has it ready, you need to use an external package, or implement on your own. The lodash library can be used for a simple implementation. Unfortunately I don’t have time to post a response.

  • @bfavaretto um... I’m already doing a scheme that I always use with setTimeOut. Anything, put here, but I’ll wait for an answer for now.

  • 1

    I use https://www.npmjs.com/package/debounce

2 answers

2

I decided to publish a reply to register the way I solved the problem. I used a mocking technique for Javascript, based on a setTimeout.

Behold:

new Vue({
  el: '#app',
  
  methods: {
    consultarQuandoParar: function consultarQuandoParar($event) {
      
      // Se chamar mais de uma vez, cancela a chamada anterior  
      
      console.log('digitou');
      clearTimeout(consultarQuandoParar.timeout);
      
      consultarQuandoParar.timeout = setTimeout(function () {
          console.log('parou de digitar e o resultado é "%s"', $event.target.value);
      }, 500);
    }
  }

})
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <input type="text" @input="consultarQuandoParar($event)" />
</div>

Basically, I call the clearTimeout to cancel the last call from setTimeout that is assigned on the property .timeout. Whether typing continues before the execution of 500 milliseconds of the previous call, it is always canceled. When you stop typing, it is executed.

Thus, with the setTimeout being always canceled, allowing yourself to run only the "latest", we have the effect of the debounce for consultations.

2

You can do this using the Vue-Rx who is part of the rxjs the life cycle of the Vue components.

See an example working: https://codesandbox.io/s/k011nv98kr

Source code for the example:

main.js

import Vue from "vue";
import VueRx from "vue-rx";
import App from "./App";

Vue.use(VueRx);

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

App.

<template>
  <div id="app">
    <input type="text" v-stream:input="search$"> - debounced: {{ searchedValue }}
  </div>
</template>

<script>
import { debounceTime, pluck } from 'rxjs/operators';

export default {
  name: "App",
  domStreams: ['search$'],
  subscriptions,
  data,
  methods: {
    onSearch
  }
};

function subscriptions() {
  this.search$.pipe(
    debounceTime(300),
    pluck('event', 'target', 'value')
  ).subscribe(this.onSearch);
}

function data() {
  return {
    searchedValue: null
  }
}

function onSearch(value) {
  this.searchedValue = value;
}
</script>

Browser other questions tagged vue.js vue.js-2

You are not signed in. Login or sign up in order to post.