CODEWITHSUNDEEP
javascriptvue.js
qliq
qliq

Reputation: 11807

How to copy InnerHtml to clipboard in Vue.js?

I'd like to copy the content of this for-loop into clipboard:

<div ref="text" class="links">
        <div class="row" v-for="(name, index) in resultNames" :key="index" >                                    
            <p>{{makeUrl(name)}} </p>
        </div>   
</div>  
<button   @click="handleCopy">Copy to Clipboard</button>

I followed this answer and came up with this method:

  handleCopy() {
     this.$refs.text.select();
     document.execCommand('copy');
    }

But this results in:

Uncaught TypeError: this.$refs.text.select is not a function

So I'm left clueless how can I solve this withouth using third party javascript plugins?

P.S. I tried some JS specific suggested answers, like this, but get error:

Uncaught TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'.

Upvotes: 4

Views: 26404

Answers (3)

Alex Pilyavskiy
Alex Pilyavskiy

Reputation: 140

Had the same issue, but vue clipboard and clipboard2, didn't help me

In result for copy to clipbboard I used JQuery and vue events

HTML part

<div class="input-group">
  <input type="text" class="form-control copyLinkInput" :value="link">
  <div class="input-group-append" @click="doCopy">
    <div class="input-group-text">
      <i class="fas fa-copy"></i>
    </div>
  </div>
</div>

Vue.js part

...

props: ['link'],
methods: {
  doCopy: function (e) {
    let selectEl = $(e.target).parents('.input-group').find('.copyLinkInput')[0];

    selectEl.select();
    document.execCommand("copy");
  }
}

...

Upvotes: 1

Ankush Sood
Ankush Sood

Reputation: 421

You can make use of the vue plugin on npm:vue-clipboard

Lets first make the html data which you want to be copied. After that we can make use of the npm plugin to copy the html data

new Vue({
    el: '#app',
    data: {
        HTMLcontent:'',
        resultNames:["John","Steward","Rock"]
    },
    created() {
    },
    methods:{
        makeData(){
            var self = this;
            for(var i = 0; i < self.resultNames.length; i++){
                self.HTMLcontent += '<p>'+self.resultNames[i]+'</p>';
            }
        },
        copyData(){
            this.makeData();
            console.log(this.HTMLcontent);
        }
    }
});

After that install a vue-plugin

npm install --save v-clipboard
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

After that make change to the copyData function as below

copyData(){
    this.makeData();
    this.$clipboard(this.invite_code);
    alert("Copied to clipboard");
}

Hope that solves your query

Upvotes: 3

user5734311
user5734311

Reputation:

Based on this answer, here's a function to select an HTMLElement's text:

selectText(element) {
  var range;
  if (document.selection) {
    // IE
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

What's left to do is to a) pass the element b) call the copy command:

this.selectText(this.$refs.text); // e.g. <div ref="text">
document.execCommand("copy");

Upvotes: 10

Related Questions