vue-clipboard2 not working inside bootstrap-vue modal

Question

I have used the vue-clipboard2 plugin inside the bootstrp-vue modal. But the text is not copying.

Then I tried to copy to clipboard with vanilla js inside the bootstrap-vue modal. But the text is not copying.

Anyone can do figure out what's the problem??

Could you provide some sample code on how you are using both together? — Troy Morehouse, Aug 01 '19 at 22:14
just add this line `VueClipboard.config.autoSetContainer = true` before `Vue.use(VueClipboard)` — Amina Darwish, Oct 22 '20 at 12:32

score 5 · Answer 1 · answered Dec 10 '19 at 10:15

The answer to this specific problem is in the docs at https://github.com/Inndy/vue-clipboard2.

By using a container option:

let container = this.$refs.container
this.$copyText("Text to copy", container)

Or you can let vue-clipboard2 set container to current element by doing this:

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

score 5 · Answer 2 · answered Apr 29 '20 at 14:08

The following worked for me and uses the new Clipboard API writeText method which is supported by most modern browsers (see Can I use for more details) and does not require vue-clipboard.

//If you want to copyText from Element
function copyTextFromElement(elementID) {
  let element = document.getElementById(elementID); //select the element
  let elementText = element.textContent; //get the text content from the element
  copyText(elementText); //use the copyText function below
}

//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
  navigator.clipboard.writeText(text);
}

<div id="mytext">This is some text that needs to be copied</div>
<button onclick="copyTextFromElement('mytext')">Copy</button>

vue-clipboard2 not working inside bootstrap-vue modal

2 Answers2