After conducting a thorough search, I haven't found a suitable answer for my issue. The problem I am facing involves a v-for loop with buttons on each item, using VueClipboard2 to copy text. Whenever a button is clicked, some CSS changes are applied to indicate the copied item. However, the issue arises when clicking on one button affects all other items and produces the same effect.

I am looking to restrict the click event to the specific item being clicked.

Below is the code snippet:

<template>
    <div class="form" id="shorten">
        <form class="" @submit.prevent="shortener($event, value)">
            <div>
                <div class="form__shortener">
                    <input
                        class="form-input"
                        type="url"
                        name="link"
                        id="link"
                        placeholder="shorten a url here"
                        aria-label="input a url"
                        v-model="value"
                    />
                    <button class="form-btn btn">
                        {{ buttonText }}
                        <p v-if="loading" class="loading"></p>
                    </button>
                </div>
                <SlideXLeftTransition :delay="100">
                    <p v-if="error" class="error">Please enter a valid link</p>
                </SlideXLeftTransition>
            </div>
        </form>
        <SlideYUpTransition group>
            <div v-for="(link, index) in links" :key="index" class="form__links">
                <p class="form__links-main">
                    {{ link.mainUrl }}
                </p>
                <div class="center form__links-copy">
                    <p>
                        <a :href="link.shortenedUrl" class="form__links-copy-link no-decoration">{{ link.shortenedUrl }}</a>
                    </p>
                    <button
                        class="form__links-copyBtn btn"
                        :class="[copied === true ? 'copied' : '']"
                        v-clipboard:copy="link.shortenedUrl"
                        v-clipboard:success="onCopy"
                        v-clipboard:error="onError"
                    >
                        <span v-if="!loading && !copied">Copy</span>
                        <span v-if="copied">Copied!</span>
                    </button>
                </div>
            </div>
        </SlideYUpTransition>
    </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { SlideYUpTransition, SlideXLeftTransition } from 'vue2-transitions';

import axios from 'axios';

export default {
    data() {
        return {
            value: '',
            links: [],
            message: '',
            error: false,
            loading: false,
            buttonText: 'Shorten it!',
            shortenedUrl: '',
            copied: false,
        };
    },
    validations: {
        value: {
            required,
            minLength: minLength(1),
        },
    },
    methods: {
        async shortener(event, value) {
            this.$v.$touch();
            if (this.$v.$invalid) {
                this.showError();
            } else {
                try {
                    this.loading = true;
                    this.buttonText = 'Loading';
                    const request = await axios.post('https://rel.ink/api/links/', { url: value });
                    this.loading = false;
                    this.buttonText = 'Shortened!';
                    setTimeout(() => {
                        this.buttonText = 'Shorten it!';
                    }, 1200);
                    this.shortenedUrl = `https://rel.ink/${request.data.hashid}`;
                    const mainUrl = request.data.url.length <= 20 ? request.data.url : `${request.data.url.slice(0, 30)}...`;
                    this.links.push({
                        shortenedUrl: `https://rel.ink/${request.data.hashid}`,
                        mainUrl,
                    });
                    localStorage.setItem('links', JSON.stringify(this.links));
                } catch (error) {
                    this.showError();
                    console.log(error);
                }
            }
        },
        onCopy() {
            this.copied = true;
            setTimeout(() => {
                this.copied = false;
            }, 2500);
        },
        showError() {
            this.error = true;
            setTimeout(() => {
                this.error = false;
            }, 2000);
        },
        onError() {
            alert('Sorry, there was an error copying that link. please reload!');
        },
        getLinks() {
            if (localStorage.getItem('links')) this.links = JSON.parse(localStorage.getItem('links'));
        },
    },
    components: {
        SlideYUpTransition,
        SlideXLeftTransition,
    },
    mounted() {
        this.getLinks();
    },
};
</script>

Your assistance would be greatly appreciated.

View the live link here:

To replicate the issue, shorten two URLs and click the copy button on one of them. This action triggers all other item's buttons as well.

Thank you for your help.