How to show 'typing' text when users typing in vuejs

userGR7l1 0
Viewed 37

I am working in a vue project where i need to show 'typing' or 'loading' text when user typing in placeholder please help me to do so

vue.js
1 Answers

This functionality is most easily achieved by setting some boolean = true on the @input event (so whenever a user is typing) and then setting the boolean back to false when typing has stopped. Bind the boolean to conditionally display some text "is typing..." under the input whenever the boolean is true.

You usually want to debounce the boolean being set to false to allow some time between keystrokes so the boolean is only set false once all typing is done. You can code your own debounce or use a library. I've provided an example below of this feature using the debounce function provided by lodash:

<template>
  <div>
    <input @input="startTyping" />
    <div>
      <small v-if="isTyping">User is typing...</small>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";

export default {
  data() {
    return {
      isTyping: false,
    };
  },
  methods: {
    startTyping() {
      this.isTyping = true;
      this.debounceStopTyping();
    },
    debounceStopTyping: debounce(function () {
      this.isTyping = false;
    }, 500),
  },
};
</script>
yoduh0
Related