Vue js stop second event

Question

I have input with some info.

On blur event or on enter press I want to do some action But when I press enter my input loses focus and two events are fired one after another-what do I do?

<input  v-on:keyup.13.prevent ='save_renamed_group(g)'
                    @blur.prevent = 'save_renamed_group(g)'>

UPD: I don't consider my question as duplicate of this one: Prevent both blur and keyup events to fire after pressing enter in a textbox

simply because I want a clear and clean and nice solution to this simple and common stuff and all solutions posted there look like a little bit of hell.

Possible duplicate of [Prevent both blur and keyup events to fire after pressing enter in a textbox](https://stackoverflow.com/questions/11143011/prevent-both-blur-and-keyup-events-to-fire-after-pressing-enter-in-a-textbox) — ceejayoz, May 21 '18 at 12:37
why not just remove the enter key handler since the blur handler will be called anyways? — thanksd, May 21 '18 at 15:31
Why does your ipnut loose focus on enter? This is not the default behaviour, do you use some library for this? Maybe this library also offers an event exactly for your scenario? — Marcel, Nov 28 '22 at 13:44

Jacob Goh · Answer 1 · 2018-05-21T15:20:12.957

Solution 1: apply debounce on the method.

Debouncing essentially groups your events together and keeps them from being fired too often. To use it in a Vue component, just wrap the function you want to call in lodash’s _.debounce function.

https://alligator.io/vuejs/lodash-throttle-debounce/

import { debounce } from 'lodash';

export default {
  methods: {
    // group all function calls within 100ms together
    // no matter how many times this function is called within 100ms, only 1 of them will be executed.
    save_renamed_group: debounce(g => {
      // ...
    }, 100),
  },
};

Pros: simple

Cons: delayed function execution

Solution 2: store state of function execution in a variable

export default {
  created() {
    // create the variable
    this.save_renamed_group_running = false;
  },
  methods: {
    save_renamed_group(g) {
      // exit if function is already running
      if (this.save_renamed_group_running) return;

      // set running to true
      this.save_renamed_group_running = true;

      // .... other logic ...

      // set running to false before exiting
      this.save_renamed_group_running = false;
      return /* something */;
    },
  },
};

Pros: immediate function execution

Cons: verbose

Vue js stop second event

1 Answers1