Vue API should be called with the correct number of arguments

VUE_MISMATCHED_COUNT_OF_ARGS
Error
Medium
cwe, vue

This rule applies when Vue API is called with the wrong number of arguments.

Because Vue API has the specification for its arguments, arguments are useless or cause undefined behavior if the number of arguments does not match.

Note: This rule is based on Vue 2.x API specifications.

-Noncompliant Code Example
+Compliant Code Example
 import Vue from 'vue';
 // Example 1
 Vue.component('example1', {
   methods: {
     handleClick() {
-      this.$nextTick(doSomething, 0); // VUE_MISMATCHED_COUNT_OF_ARGS alarm because 'vm.$nextTick()' does not take the second argument.
+      this.$nextTick(doSomething);
     }
   },
   template: '<div @click="handleClick">Example 1</div>'
 });
 // Example 2
 Vue.component('example2', {
   methods: {
     handleClick() {
-      this.$emit(); // VUE_MISMATCHED_COUNT_OF_ARGS alarm because 'vm.$emit()' needs the event name argument.
+      this.$emit('my-event');
     }
   },
   template: '<div @click="handleClick">Example 2</div>'
 });

Noncompliant Code Example

View with compliant examples side by side

import Vue from 'vue';

// Example 1
Vue.component('example1', {
  methods: {
    handleClick() {
      this.$nextTick(doSomething, 0); // VUE_MISMATCHED_COUNT_OF_ARGS alarm because 'vm.$nextTick()' does not take the second argument.
    }
  },
  template: '<div @click="handleClick">Example 1</div>'
});

// Example 2
Vue.component('example2', {
  methods: {
    handleClick() {
      this.$emit(); // VUE_MISMATCHED_COUNT_OF_ARGS alarm because 'vm.$emit()' needs the event name argument.
    }
  },
  template: '<div @click="handleClick">Example 2</div>'
});

Compliant Code Example

View with noncompliant examples side by side

import Vue from 'vue';

// Example 1
Vue.component('example1', {
  methods: {
    handleClick() {
      this.$nextTick(doSomething);
    }
  },
  template: '<div @click="handleClick">Example 1</div>'
});

// Example 2
Vue.component('example2', {
  methods: {
    handleClick() {
      this.$emit('my-event');
    }
  },
  template: '<div @click="handleClick">Example 2</div>'
});

Version

This rule was introduced in DeepScan 1.39.0.

Vue API should be called with the correct number of arguments

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?