vue/next-tick-style
enforce Promise or callback style in
nextTick
- 🔧 The
--fix
option on the command line can automatically fix some of the problems reported by this rule.
📖 Rule Details
This rule enforces whether the callback version or Promise version (which was introduced in Vue v2.1.0) should be used in Vue.nextTick
and this.$nextTick
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
import { nextTick as nt } from 'vue';
export default {
async mounted() {
/* ✓ GOOD */
nt().then(() => callback());
await nt(); callback();
Vue.nextTick().then(() => callback());
await Vue.nextTick(); callback();
this.$nextTick().then(() => callback());
await this.$nextTick(); callback();
/* ✗ BAD */
nt(() => callback());
nt(callback);
Vue.nextTick(() => callback());
Vue.nextTick(callback);
this.$nextTick(() => callback());
this.$nextTick(callback);
}
}
</script>
🔧 Options
Default is set to promise
.
json
{
"vue/next-tick-style": ["error", "promise" | "callback"]
}
"promise"
(default) ... requires using the promise version."callback"
... requires using the callback version. Use this if you use a Vue version below v2.1.0.
"callback"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
import { nextTick as nt } from 'vue';
export default {
async mounted() {
/* ✓ GOOD */
nt(() => callback());
nt(callback);
Vue.nextTick(() => callback());
Vue.nextTick(callback);
this.$nextTick(() => callback());
this.$nextTick(callback);
/* ✗ BAD */
nt().then(() => callback());
await nt(); callback();
Vue.nextTick().then(() => callback());
await Vue.nextTick(); callback();
this.$nextTick().then(() => callback());
await this.$nextTick(); callback();
}
}
</script>
📚 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