Vue API should be called with arguments of correct types

  • VUE_MISMATCHED_TYPE_OF_ARG
  • Error
  • Medium
  • vue

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

Because Vue API has the specification for its arguments, Vue will throw an error or output a warning message if the types of arguments are wrong.

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

Noncompliant Code Example

View with compliant examples side by side
import Vue from 'vue';

// Example 1
Vue.component({ // VUE_MISMATCHED_TYPE_OF_ARG alarm because the first argument's type of 'Vue.component()' should be string.
  name: 'hello',
  data() {
    return { msg: 'hi' };
  },
  template: '<div>{{ msg }}</div>'
});

new Vue({
  el: '#app',
  template: '<hello />' // Vue warns because 'hello' component is not registered.
});

// Example 2
new Vue({
  el: '#app',
  data: { msg: 'hi' },
  template: '<div>{{ msg }}</div>',
  mounted() {
    this.$watch(123, function (newVal, oldVal) { // VUE_MISMATCHED_TYPE_OF_ARG alarm because the first argument's type of 'vm.$watch()' should be string or function.
                                                 // A TypeError occurs because Vue tries calling 'split()' on the non-string value inside 'vm.$watch()'.
      // do something
    });
  }
});

Compliant Code Example

View with noncompliant examples side by side
import Vue from 'vue';

// Example 1
Vue.component('hello', {
  data() {
    return { msg: 'hi' };
  },
  template: '<div>{{ msg }}</div>'
});

new Vue({
  el: '#app',
  template: '<hello />'
});

// Example 2
new Vue({
  el: '#app',
  data: { msg: 'hi' },
  template: '<div>{{ msg }}</div>',
  mounted() {
    this.$watch('123', function (newVal, oldVal) {
      // do something
    });
  }
});

Version

This rule was introduced in DeepScan 1.14.0-beta.

See