How can I create a copy button directly from same button Vuejs

Question

Hi I have a code like this in VueJs:

methods: {
   copyUrl(data) {
      console.log(data);
      data.select();
      document.execCommand("copy");
   }
}

My button is:

 <button v-on:click="copyUrl('1234')" class="btn btn-primary btn-circle btn-sm">
     <i class="fas fa-link"></i>
 </button>

I wonder how can I copy the 1234? I mean I need to create a url copy button.

Thanks

Amaarockz · Answer 1 · 2021-11-18T13:50:17.400

0

No need to pass data to the function, try something like below

methods: {
  copyUrl() {
   var cpLink = window.location.href;
   cpLink.select();
   try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy command was ' + msg);
   } catch (err) {
     console.log('Oops, unable to copy');
   }
   event.preventDefault; 
 }
}

edited Nov 18 '21 at 13:50

answered Nov 18 '21 at 13:31

Amaarockz

4,348
2
9
27

@Amaarockz and how can I fix the button ? I mean – Jis Nov 18 '21 at 13:39
In button just make it as `v-on:click="copyUrl" ` – Amaarockz Nov 18 '21 at 13:49
Check the edited answer – Amaarockz Nov 18 '21 at 13:55

How can I create a copy button directly from same button Vuejs

1 Answers1