vue/no-arrow-functions-in-watch
disallow using arrow functions to define watcher
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-recommended"].
📖 Rule Details
This rule disallows using arrow functions when defining a watcher. Arrow functions bind to their parent context, which means they will not have access to the Vue component instance via this. 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.
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0