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

我已经搜索过了，找不到任何符合我需要的答案。我有一个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>

{{buttonext}}

请输入有效链接

{{link.mainUrl}



复制
收到了！
从“vuelidate/lib/validators”导入{required，minLength}；
从“vue2转换”导入{SlideYUpTransition，SlideXLeftTransition}；
从“axios”导入axios；
导出默认值{
数据（）{
返回{
值：“”，
链接：[]，
消息：“”，
错误：false，
加载：false，
buttonText:'缩短它！'，
shortenedUrl:“，
抄袭：假，
};
},
验证：{
价值：{
必修的，
minLength:minLength（1），
},
},
方法：{
异步缩短器（事件、值）{
这个。$v.$touch（）；
如果（本$v.$无效）{
这个是；
}否则{
试一试{
这是。加载=真；
this.buttonText=‘加载’；
const request=等待axios.post（'https://rel.ink/api/links/“，{url:value}）；
这一点：加载=错误；
this.buttonText='shorted！'；
设置超时（（）=>{
this.buttonText='缩短它！'；
}, 1200);
此.shortenedUrl=`https://rel.ink/${request.data.hashid}`；
const mainUrl=request.data.url.length{
this.copied=false；
}, 2500);
},
淋浴器（）{
this.error=true；
设置超时（（）=>{
这个错误=false；
}, 2000);
},
onError（）{
警报（'抱歉，复制该链接时出错。请重新加载！'）；
},
getLinks（）{
if（localStorage.getItem（'links'））this.links=JSON.parse（localStorage.getItem（'links'））；
},
},
组成部分：{
滑升过渡，
SlideXLeftTransition，
},
安装的（）{
这是getLinks（）；
},
};

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

以下是实时链接：

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

谢谢。

您出现问题的原因是 ：class=“[copied===true？”copied'：''”。因为当您单击任何复制按钮时，您更改了复制，并且在所有迭代中使用相同的类

所以，有问题了。 解决方案是，您应该将此复制到每个链接所对应的

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

---

并且，检查每个链接的复制值。

更改

copied={}

，然后在触发

v-clipboard:success=“onCopy（index）”

时，让

设置此项。$set（this.copied，index，true）

。最后更改模板，如

复制！

，

：class=“[copied[index]？'copied'：”