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??

Answer 1

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>