CODEWITHSUNDEEP
twitter-bootstrapbootstrap-vueclipboard.js
SUHAIL KC
SUHAIL KC

Reputation: 430

vue-clipboard2 not working inside bootstrap-vue modal

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

Upvotes: 4

Views: 2510

Answers (2)

Coola
Coola

Reputation: 3142

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>

Upvotes: 6

Andrew Bibby
Andrew Bibby

Reputation: 338

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)

Upvotes: 5

Related Questions