Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Copy data(text) to Clipboard in Vue(Nuxt js) without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
When I click the vs-button, the single_download_link.pdfId should be copied on clipboard.
I tried like this. But it was not working. And I will not use v-clipboard node module.
Please help me. Regards.
DOM code:
<div ref="text" class="w-full">{{single_download_link.pdfId}}
</div>
<vs-button block @click="copy()">
Copy this link to clipboard.
</vs-button>
//this is my function
<script>
import "../../assets/css/products.css";
export default {
name: 'Products',
components:{
Vinput,
},
data () {
return {
single_download_link:{
pdfId:"",
pdfRandomName:"",
uploaderUserName:"",
uploaderUserId:"",
uploaderUserEmail:""
}
}
},
methods:{
copy(){
this.$refs.text.select();
document.execCommand('copy');
},
},
}
</script>
Answer
This worked for me, just put it into your methods and pass any String you wanted to copy.
copyToClipBoard(textToCopy){
const tmpTextField = document.createElement("textarea")
tmpTextField.textContent = textToCopy
tmpTextField.setAttribute("style","position:absolute; right:200%;")
document.body.appendChild(tmpTextField)
tmpTextField.select()
tmpTextField.setSelectionRange(0, 99999) /*For mobile devices*/
document.execCommand("copy")
tmpTextField.remove()
},
We are here to answer your question about Copy data(text) to Clipboard in Vue(Nuxt js) - If you find the proper solution, please don't forgot to share this with your team members.