🫥

Composition API でどうしても this を使いたい時の対処法

2023/04/20に公開

前提

  • Option API -> Composition API への置き換え作業中
  • Bootstrap Vue を使っている

やりたいこと

  • Bootstrap Vue のモーダル this.$bvModal を書き換えたい。
  • ctxuseContext() など、コンテキストの中には無い。どうしよう。。

結論

this のかわりに getCurrentInstance() を使う

Sample

import { defineComponent, getCurrentInstance } from "@nuxtjs/composition-api";
export default defineComponent({
  setup() {
    const instance = getCurrentInstance()
    const close = () => {
      ctx.emit("close");
      instance.proxy.$bvModal.hide("modal"); // instance.proxy が this に相当
    };
    return { close };
  },
});

🎉
※あくまで Nuxt3 移行するまでの応急処置として、多用しないほうがいいと思います。。

Discussion