Doesn't work on Chrome OS X Mojave

[Andrew]

Bind 'copy' funtion to button:
function copy(val) {
this.$copyText(val).then(() => {
console.log('success')
}, () => {
console.log('error')
})
}

in console, I get message 'success', but actually clipboard stay without change (value not saves in system clipboard). Funny thing if I set "debugger" in the begin of fuction, and in chrome tools press resume "value" copies to system clipboard

[Inndy]

Can not reproduce. Please provide a minimal (not) working example.

[Michael Holmes]

I am having the same issue. It works correctly and copies the value on Safari, but not on Chrome and Firefox. Same as with andreydos, the console log reports that the value was copied successfully, but it is not in the clipboard

<span
  title="Copy to clipboard"
  class="link headline"
  v-clipboard:copy="wholeorder.orderreference"
  v-clipboard:success="copyOrderRefToClipboard"
>{{ wholeorder.orderreference }}</span>

copyOrderRefToClipboard: function (e) {
  console.log(`Copied: ${e.text}`)
  this.copiedSnackbar = true
  this.copiedSnackbarValue = `${e.text} copied to clipboard.`
}

This in on MacOS Mojave 10.14.4
Using NPM
Vue: vue@2.6.10
Vuetify: vuetify@1.5.14

EDIT:
I have tried using both 'Sample' and 'Sample 2' from the website, and both say they worked but both failed.

EDIT#2:
This is happening specifically on Vuetify Dialog Boxes. When I use vue-clipboard2 on a normal page it works. When I use it in the same project on a dialog/popup, it does not work (https://vuetifyjs.com/en/components/dialogs)

Thanks

[M3psipax]

Hey guys, I just had this issue with the vuetify modal and I solved it fyi:

My problem was that it didn't work when I was trying to copy a string directly without any html element while a vuetify modal was open.

Turns out I just had to RTFM, because it's addressed in the description of this repo.
But setting autoSetContainer didn't work for me since I was just passing along a string.
Instead, I had to make a reference to an element inside the modal and pass it along like so:

this.$copyText(text, this.$refs.copyContainer.$el)

it's important to pass $el as opposed to just the ref because that is the underlying HTML element that the fake element is attached to.

hope this'll help some people. Cheers!

[Jes Gonzalez]

this.$copyText(text, this.$refs.copyContainer.$el)

this saved me thank you for posting. Same scenario, Vuetify with a v-dialog opened.
vue@2.6.10 and vuetify@1.5.15

[Michael Holmes]

Turns out I just had to RTFM, because it's addressed in the description of this repo.

Thanks for pointing me in the right direction, I should have paid more attention and RTFM!

[Weihong Guan]

Thanks @M3psipax , I run into this problem with vuetify too. a working example look like this

<v-dialog v-model="isRawVisible">
  <v-card>
    <v-card-actions>
      <v-btn small icon @click="doCopy" ref="container">
        <v-icon small>mdi-content-copy</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

async doCopy() {
  return this.$copyText(this.raw, this.$refs.container.$el);
},

just ref the button as the container.

[GGedde]

I had the same issue.
I just needed to add the following line in my config

VueClipboard.config.autoSetContainer = true // add this line

[dikkini]

I had the same issue.
I just needed to add the following line in my config

VueClipboard.config.autoSetContainer = true // add this line

this does not work for me

vuejs, vuejs-bootstrap

[Joel Hernández]

Same here. For some reason, it works only some 10% of the time.