[Vuejs]-How to write non-arrow function as argument

by

2👍

✅

If function() {} works, but the linter is complaining about the funciton having no name, then simply give the function a name

methods: {
  stylizeHeader: debounce(function debouncedStylizeHeader(event) {
    // ..... your code
  }, 20),
},

The purpose of naming such a function is purely for debugging purposes – an error stack trace will include the name of that function rather than anonymous function (or similar) which is useful if you have a large codebase with many people working on it

Perhaps the linter rules you are using are designed for such an environment (i.e. large codebase) and the rule is there to assist in debugging errors

There’s no reason not to do it, it’s good practice (in my opinion)

0👍

I am not a Vuejs developer, but I use vanilla JavaScript and NodeJS.

While I am struggling to understand your code I suppose this what you meant to write.
It seems your function has two names: stylizeHeader: denounce. However, the methods part of Vue accepts functions not really object kind of definition. You have to choose one name.

Try this changing this

  methods: {
    stylizeHeader: debounce(event => {
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    }, 20),
  },

To

  methods: {
    stylizeHeader (event) {
    // You can now set timer/interval here 
    // which in turn will hold rest of the code below
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    },
  },

OR

  methods: {
    debounce (event) {
    // You can now set timer/interval here 
    // which in turn will hold rest of the code below
      if (event.target.scrollTop <= 1 && !this.scrolled) {
        this.scrolled = true;
        console.log('true');
      } else if (this.scrolled) {
        this.scrolled = false;
        console.log('false');
      }
    },
  },

However, if you implementation is a closure why no do this:

 methods: {
  stylizeHeader (event) {
   debounce() {
    //code
   }
  }
}

Leave a comment