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