vue/valid-next-tick
enforce valid
nextTick
function calls
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential"
,*.configs["flat/essential"]
,"plugin:vue/essential"
,*.configs["flat/vue2-essential"]
,"plugin:vue/vue3-strongly-recommended"
,*.configs["flat/strongly-recommended"]
,"plugin:vue/strongly-recommended"
,*.configs["flat/vue2-strongly-recommended"]
,"plugin:vue/vue3-recommended"
,*.configs["flat/recommended"]
,"plugin:vue/recommended"
and*.configs["flat/vue2-recommended"]
. - 🔧 The
--fix
option on the command line can automatically fix some of the problems reported by this rule. - 💡 Some problems reported by this rule are manually fixable by editor suggestions.
📖 Rule Details
Calling Vue.nextTick
or vm.$nextTick
without passing a callback and without awaiting the returned Promise is likely a mistake (probably a missing await
).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
import { nextTick as nt } from 'vue';
export default {
async mounted() {
/* ✗ BAD: no callback function or awaited Promise */
nt();
Vue.nextTick();
this.$nextTick();
/* ✗ BAD: too many parameters */
nt(callback, anotherCallback);
Vue.nextTick(callback, anotherCallback);
this.$nextTick(callback, anotherCallback);
/* ✗ BAD: no function call */
nt.then(callback);
Vue.nextTick.then(callback);
this.$nextTick.then(callback);
await nt;
await Vue.nextTick;
await this.$nextTick;
/* ✗ BAD: both callback function and awaited Promise */
nt(callback).then(anotherCallback);
Vue.nextTick(callback).then(anotherCallback);
this.$nextTick(callback).then(anotherCallback);
await nt(callback);
await Vue.nextTick(callback);
await this.$nextTick(callback);
/* ✓ GOOD */
await nt();
await Vue.nextTick();
await this.$nextTick();
/* ✓ GOOD */
nt().then(callback);
Vue.nextTick().then(callback);
this.$nextTick().then(callback);
/* ✓ GOOD */
nt(callback);
Vue.nextTick(callback);
this.$nextTick(callback);
}
}
</script>
🔧 Options
Nothing.
📚 Further Reading
Vue.nextTick
API in Vue 2vm.$nextTick
API in Vue 2- Global API Treeshaking
- Global
nextTick
API in Vue 3 - Instance
$nextTick
API in Vue 3
🚀 Version
This rule was introduced in eslint-plugin-vue v7.5.0