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.

vue-clipboard2/vue-clipboard.js

Lines 3 to 18 in 8a542c5

	var VueClipboardConfig = {
	autoSetContainer: false,
	appendToBody: true // This fixes IE, see #50
	}
	var VueClipboard = {
	install: function (Vue) {
	Vue.prototype.$clipboardConfig = VueClipboardConfig
	Vue.prototype.$copyText = function (text, container) {
	return new Promise(function (resolve, reject) {
	var fakeElement = document.createElement('button')
	var clipboard = new Clipboard(fakeElement, {
	text: function () { return text },
	action: function () { return 'copy' },
	container: typeof container === 'object' ? container : document.body
	})

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(() => {
});`