ホーム

転職ドラフト(次回10/20)

v-dialogの中でVueClipboardを使いたいのに使えないを解決

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

v-dialog の中で VueClipboard を使うためには、少しコツが必要だったのでメモにしました。

v-dialog 内だと、window の参照が変わってしまうみたいな仕様らしく、クリップボードのパッケージが正常に動かないみたいです。(ここら辺はよく確認していないので話半分でお願いします)

調べてみると、1行追加することで動かすことができました。

環境
Nuxt2.15.7
Vuetify:"^2.3.6",
vue-clipboard2: "^0.3.1",

目次

  1. 結論
  2. 全てのコード
  3. 参考

結論

1行追加すれば動きます。

methods: {
  onCopy: function(text) {
    //この1行があると動く
    const container = document.querySelector(".v-dialog");
      this.$copyText(text, container).then(() => {
      console.log('コピー完了後')
    });
  },
}

全てのコード

<template>
  <v-btn small text color="blue" @click="onCopy(text)"> コピー </v-btn>
</template>

<script>
  export default {
    data() {
      return {
        text: "コピーするテキスト",
      };
    },
    methods: {
      onCopy: function (text) {
        //この1行があると動く
        const container = document.querySelector(".v-dialog");
        this.$copyText(text, container).then(() => {
          console.log("コピー完了後");
        });
      },
    },
  };
</script>

参考

GithubIssue

まとめ

以上、長年ハマった v-dialog 内で vue-clipboard2 を使えるようになる記事でした。

誰かの参考になれば幸いです。

質問、誤植などあれば TwitterDM からご連絡ください。