Question

我已经搜索过，但是找不到适合我需要的答案。我在每个项目上都有一个带按钮的v-for循环，并使用VueClipboard2复制文本。每当单击按钮时，我都会进行一些CSS更改以指示已复制的项目。发生的情况是，如果有多个项目，则单击任何一个按钮都会影响其他所有项目，并且效果相同。

我想将点击限制为被点击的“自己”项目。

这是我的代码：

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

如果有人帮忙，我将不胜感激。

以下是实时链接：https://url-shortener-vue.netlify.app

要复制，请缩短两行并单击1上的复制按钮。它将触发所有其他项按钮。

谢谢。

Answer 1

您遇到问题的原因是 ：class =“ [copied === true？'copied'：'']” 。从您单击任何“复制”按钮以来，就更改了复制，并且在所有迭代中使用了相同的类。

因此，遇到了问题。解决方法是，您应将此复制对应于每个链接。因此，将您的链接作为对象。

link = [{ link: 'url...', copied: false}, {}, ...].

，然后检查每个链接的复制值。

Vue v-for循环单击事件会影响所有项目

1 个答案: