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
– Troy Morehouse, Commented Aug 1, 2019 at 22:14
just add this line VueClipboard.config.autoSetContainer = true before Vue.use(VueClipboard) — Amina Darwish
– Amina Darwish, Commented Oct 22, 2020 at 12:32

Coola · Accepted Answer · 2020-04-29 14:08:45Z

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>

Thanks. I was probably lucky in being the first few people to use the api.

Andrew Bibby · Accepted Answer · 2019-12-10 10:15:40Z

5

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)

answered Dec 10, 2019 at 10:15

Andrew Bibby

3385 silver badges12 bronze badges

Collectives™ on Stack Overflow

vue-clipboard2 not working inside bootstrap-vue modal

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related