not work on vuetify dialog

[jazuly]

im not sure but when i try, it not work on vuetify dialog

[billerby]

Having the same issue since a while back. Which version of vuetify are you on?

[jazuly]

the latest one..

[billerby]

Well this is fixed in #23 you have to provide a container to make it work on modals.

[orkhan-huseyn]

Use container option if you're inside Vuetify dialog.

const container = document.querySelector('.v-dialog');

this.$copyText('Your text here', container).then(() => {
     this.snackbar = true;
});

[ziqq]

Use this config, it's work.

import VueClipboard from 'vue-clipboard2';
VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard);

[alfreema]

Use container option if you're inside Vuetify dialog.

const container = document.querySelector('.v-dialog');

this.$copyText('Your text here', container).then(() => {
     this.snackbar = true;
});

This worked for me. I am able to use a v-btn inside a v-dialog, and the contents of the clipboard are correct when I paste into a text doc.

Use this config, it's work.

import VueClipboard from 'vue-clipboard2';
VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard);

This did not. My v-btn inside the v-dialog fires, the $copyText function fires, but the clipboard does not get updated.

[renatodeleao]

Looking at the source, the option autoSetContainer is only passed down to vue directive not to the instance prototype function $copyText.

https://github.com/Inndy/vue-clipboard2/blob/8a542c558c6857212d06f6fc1929384a5b5104cc/vue-clipboard.js#L3-L18

This makes sense, because as an imperative API, it seems to me that you can't infer the container automagically, since the function can be called anywhere — EDIT: that being said, documentation could explicit about it.

So in addendum to @alfreema @orkhan-huseyn answers for the container option:

• using a vue ref, tike this.$refs.dialog instead of querySelector might be more vue-ish.
• using this.$el would also be a good candidate for dialogs (if the function is being called within).

Cheers!

[Microhawk]

If the parent component is a "v-dialog", maybe you can add a tag like " copySelect=".v-dialog"" in the parent component, then pass the value to the child component. In the child component, code likes the follow. `let container = document.querySelector(this.copySelect);

this.$copyText('Your text', container).then(() => { });`