Copy url to clipboard via button click in a vuejs component

Question

I have following component, and I would like to have a button that copies the link_url to the clipboard on click.

I have javascript code that works when selecting an id, however the links do not have an id. Can I accomplish the selection of the a-tag via refs in the component itself, or what would be the best way to get this done.

I was also thinking about generating an a-tag with the this.link_url in the copyURL() dynamically but I guess that would be very dirty.. I am looking for the vuejs way.

<template>
  <li class="list-group-item">
    <a :href="link_url" 
         class="text-dark" 
         target="_blank" 
         rel="noopener noreferrer">{{ link_name }}</a>
    <button @click="copyUrl">copy url from a tag</button>
  </li>      
</template>

<script>
export default {
  props: ["link_url", "link_name"],
  methods: {
    copyURL() {
      var Url = document.getElementById('myid'); /*GET vuejs el reference here (via $ref) but how?*/
      Url.innerHTML = window.location.href;
      console.log(Url.innerHTML)
      Url.select();
      document.execCommand("copy");
    }
  }
}
</script>

<style>
</style>

Answer 1

You can use navigator object with clipboard in javascript.

Note: navigator.clipboard.writeText is asynchronous.

methods: {
  async copyURL(mytext) {
    try {
      await navigator.clipboard.writeText(mytext);
      alert('Copied');
    } catch($e) {
      alert('Cannot copy');
    }
  }
}