Issue with VueJS component's copy link functionality malfunctioning

I have integrated a feature in my Laravel/Vue application where users can copy a link by clicking on an icon.

Currently, my component includes the following code:

 <a href="sample.site" class="text-dark" target="_blank" rel="noopener noreferrer" ref="mylink">
    <img class="social_icon"  @click="copyURL($refs.mylink)"
      src="/images/game/copy.png"
    /></a>
    <p>copied: {{ link }}</p>

In my script, I have the following:

<script>
export default {
  
};
const app = new Vue({
    el: '#app',
    data() {
      return {
        link: ''
      }
    },
    methods: {
      copyURL(link) {
        this.link = link.href
      }
    }

})
</script>

Despite implementing this code, the functionality is not working as expected and there are no visible errors present.

Answer №1

The copyURL method has not been invoked.

<a :href="mysite.example" @click="copyURL" ref="myUrl">
  <img class="share_icon" src="/images/app/copy.png" />
</a>

Answer №2

In order to copy a link into the user's clipboard for pasting elsewhere, follow these steps:

const targetElement = document.querySelector(selectedElement);
targetElement.select();
document.execCommand('copy');

The link value is now copied and ready to be pasted.

Remember that the document.execCommand('copy') function can only work with input-type elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

The query is coming up empty even though there are expected results

My project involves a Postgres database that serves as a demo forum. Within this database, there are two tables: topic id | topic_id (the parent topic) | name | description ------------------------------------------------------- uuid | uuid ...

React/NextJS: Firebase Realtime Database displaying the message "Error: Client is offline"

Encountering an occasional error when using React with NextJS to fetch data from a Firebase Realtime Database. Unhandled Runtime Error Error: Error: Client is offline. Currently utilizing Firebase version 9.0.1 for React. The initialisation and configura ...

Observer function simulated by SinonStub

I am currently testing express middleware using sinon.js My goal is to verify that it sends a specific JSON response and prevents the request from moving on to the next middleware or request handler. const middleware = (req: Request, res: Response, nex ...

Link clicking does not trigger URL routing properly

I've been tasked with updating our web application, and I'm facing a challenge that I need help with. My boss wants users to be able to click on a link in an email and have the internal company web app directly navigate to a specific page indicat ...

How can I modify my database query to exclude duplicate values in the results?

Here is a sample query: $data = DataModel::select('id')->get(); and the output looks like this: [{"id":1},{"id":2},{"id":3},{"id":3},{"id":4}] I want to remove duplicate ids, resulting in: [{ ...

The Node.js execSync functionality is not functioning as expected, as the changes made to the system are not taking effect

I'm looking to prevent chrome.exe from accessing the internet through the Windows firewall. The specific command I need to use is netsh advfirewall firewall add rule name="Block Chrome" dir=out action=block program="C:\Program Files (x86)\G ...

Require assistance to resolve variable scope problems

Having trouble accessing the names array within the driver.executeScript method. Any suggestions on how to resolve this issue? var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until; var driver = new webdri ...

How come the selected value is different but the old value is still being shown?

Currently, I am diving into Vue with Element-UI and facing an interesting challenge today. Even though the console shows that my select's value has been updated, the page still displays the old value. Why is this happening? Below is the code for my ...

Is there an equivalent to Tomcat specifically designed for Node.js applications?

Looking for an application server that offers an administration interface to deploy node.js applications, access log files, and manage running applications with options to start, stop, restart, and monitor? ...

Error Uncovered: React minification problem #200

I am new to React and struggling to resolve this error. Below is my code using React components: I am attempting to create a Google Search Image result with an image, caption, and link. However, when I load the page in the browser, it shows up blank. Th ...

The AJAX request is functioning properly, however, when I attempt to click the icon within the button, a 500 internal server error is triggered

Encountering a 500 internal server error specifically when attempting to click the thumbs-up icon within the like button: <button class="submit-btn like" id='{{ $image->id }}'> <i class="far fa-thumbs-up"></i> Like </ ...

Formatting dates in Google Sheets scripts

As someone with no coding experience, I'm in desperate need of assistance. Everyday, I receive a scheduled report via email containing updates. To streamline the process, I've utilized a Google Sheets script that imports this report into the she ...

Tips for incorporating a Spotify-style play button using CSS into a table row

Hey there! I recently attempted to customize my button like Spotify. I wanted the table row to display a play button when hovered over, and when clicked, the image would change. https://i.sstatic.net/aJIna.jpg After seeking advice from another fiddle an ...

Executing an external Python script through an HTML button from a location outside the Django project

I'm encountering an issue when attempting to run a Python script through an HTML button. The error message I receive is: module 'sys' has no attribute 'execute' In my views.py, I have the following code: from subprocess import r ...

I'm having trouble with my AngularJS Spinner directive

Check out this simple directive I created to display a spinner on my button while something is happening remotely: http://plnkr.co/edit/rAJ4X7A3iidmqUD2M63A?p=preview Here's the html: <!DOCTYPE html> <html ng-app="app"> <head> ...

Perform a comparison of two JSON structures in PHP, identifying any missing elements in each and adding them with a default value

I have two JSONs that need to be compared in order to add missing elements from one JSON with a default value. Despite trying the code below, I'm facing an issue where both JSONs are being merged together. json1 = [{"id":1,"name": ...

Error in binding dynamic component was encountered

Our Angular 2 application includes the use of the Kendo Combobox component. This particular component is wrapped within a dynamically created component during runtime. The process for creating this component is quite simple: let factory = this.resolver ...

Assign a specific value to ngModel in Angular 4

I'm currently working with Angular4 and trying to link the ngValue attribute to ngModel. Unfortunately, I am receiving a Null error in the process. Can someone please assist me in establishing the connection between ngValue and ngModel? <select na ...

Importing Next.js with variables or conditionally importing the module

import { keyFeatures } from 'common/data/AppClassic'; I am completely new to using Next.js and templates. Despite that, I have successfully integrated i18n into my project without much difficulty. However, I now face the challenge of wanting to ...