Vue
v-dialogの中でVueClipboardを使いたいのに使えないを解決
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
v-dialog の中で VueClipboard を使うためには、少しコツが必要だったのでメモにしました。
v-dialog 内だと、window の参照が変わってしまうみたいな仕様らしく、クリップボードのパッケージが正常に動かないみたいです。（ここら辺はよく確認していないので話半分でお願いします）
調べてみると、１行追加することで動かすことができました。
環境
Nuxt2.15.7
Vuetify:"^2.3.6",
vue-clipboard2: "^0.3.1",結論
１行追加すれば動きます。
methods: {
onCopy: function(text) {
//この１行があると動く
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) {
//この１行があると動く
const container = document.querySelector(".v-dialog")
this.$copyText(text, container).then(() => {
console.log("コピー完了後")
})
},
},
}
</script>
参考
まとめ
以上、長年ハマった v-dialog 内で vue-clipboard2 を使えるようになる記事でした。
誰かの参考になれば幸いです。
質問、誤植などあれば TwitterDM からご連絡ください。
