How to copy InnerHtml to clipboard in Vue.js?

Question

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'.

You can simply mirror the data in a hidden <textarea> and use that. — user5734311
– user5734311, Commented Jan 14, 2019 at 9:49
You need to take the innerHTML and put it inside a textarea and only then select and copy it. — Oram
– Oram, Commented Jan 14, 2019 at 9:50
Possible duplicate of How do I copy to the clipboard in JavaScript? More specifically - this answer — Oram
– Oram, Commented Jan 14, 2019 at 9:51

user5734311 · Accepted Answer · 2019-01-14 10:38:09Z

10

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");

answered Jan 14, 2019 at 10:38

user5734311

Sign up to request clarification or add additional context in comments.

2 Comments

Schroet Over a year ago

it's not working - error message appeared: Error in v-on handler: "TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'." when I put div's ref as parameter.

Amdouni Mohamed Ali Over a year ago

@Schroet make sure that your div contains only the text to copy in my case i used this to copy a phone number : <span ref="copyPhone"> {{ phone_icon.phone }} </span>

Ankush Sood · Accepted Answer · 2019-07-19 08:10:41Z

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

Alex Pilyavskiy · Accepted Answer · 2019-08-09 09:13:03Z

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");
  }
}

...

Collectives™ on Stack Overflow

How to copy InnerHtml to clipboard in Vue.js?

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Related