Skip to content

Latest commit

 

History

History
141 lines (110 loc) · 3.66 KB

next-tick-style.md

File metadata and controls

141 lines (110 loc) · 3.66 KB
pageClass sidebarDepth title description since
rule-details
0
vue/next-tick-style
enforce Promise, Await or callback style in `nextTick`
v7.5.0

vue/next-tick-style

enforce Promise, Await 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.

<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.

{
  "vue/next-tick-style": ["error",  "promise" | "await" | "callback"]
}
  • "promise" (default) ... requires using the promise version.
  • "await" ... requires using the await syntax version.
  • "callback" ... requires using the callback version. Use this if you use a Vue version below v2.1.0.

"await"

<script>
import { nextTick as nt } from 'vue';

export default {
  async mounted() {
    /* ✓ GOOD */
    await nt(); callback();
    await Vue.nextTick(); this.callback();
    await this.$nextTick(); this.callback();

    /* ✗ BAD */
    nt().then(() => callback());
    Vue.nextTick().then(() => callback());
    this.$nextTick().then(() => callback());
    nt(() => callback());
    nt(callback);
    Vue.nextTick(() => callback());
    Vue.nextTick(callback);
    this.$nextTick(() => callback());
    this.$nextTick(callback);
  }
}
</script>
### `"callback"` 
<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

🚀 Version

This rule was introduced in eslint-plugin-vue v7.5.0

🔍 Implementation