pageClass | sidebarDepth | title | description | since |
---|---|---|---|---|
rule-details |
0 |
vue/no-arrow-functions-in-watch |
disallow using arrow functions to define watcher |
v7.0.0 |
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"
.
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>
Nothing.
This rule was introduced in eslint-plugin-vue v7.0.0