Skip to content

Latest commit

 

History

History
63 lines (52 loc) · 1.76 KB

no-arrow-functions-in-watch.md

File metadata and controls

63 lines (52 loc) · 1.76 KB
Raw
pageClass sidebarDepth title description
rule-details
0
vue/no-arrow-functions-in-watch
disallow using arrow functions to define watcher

vue/no-arrow-functions-in-watch

disallow using arrow functions to define watcher

  • ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

This rules disallows using arrow functions to defined watcher.The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect.(see here for more details)

<script>
export default {
  watch: {
    /* ✓ GOOD */
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    b: 'someMethod',
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    d: {
      handler: 'someMethod',
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    'e.f': function (val, oldVal) { /* ... */ }

    /* ✗ BAD */
    foo: (val, oldVal) => {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
}
</script>

🔧 Options

Nothing.

🔍 Implementation