Vue @click计数器并为可重用组件更新背景2分钟 [英] Vue @click counter and update background for 2 minutes for reusable component
问题描述
我有一个可重复使用的Vue组件,它基本上是一个用户卡,可显示多个用户的数据数组.我想做的是,当单击特定用户角落的单词提醒时,该用户卡的背景将在2分钟内更改颜色,然后恢复为以前的样子,但会添加警报旁边的数字1 ,并且每次点击都会不断增加.
I have a reusable vue component which is basically a user card that displays an array of data for multiple users. What I would like to do is when clicking on the word alert in the corner for a particular user, the background for that users card will change colours for 2 minutes and then revert to the way it was before but it will add the number 1 next to alert and keep incrementing for each click.
到目前为止,我有:
<div class="card" v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
<div class="l" v-on:click="greet()" >Alert{{count}}</div>
这是我单击警报并显示计数器的地方.
which is where I click on alert and display counter.
data () {
return {
count: null,
arrays: [
{
name: 'John',
},
{
name: 'Alice',
}
]
...
以及更改颜色和计数器的功能:
And a function to change colour and counter:
greet: function (event) {
var name = this.arrays[1]['name'];
var orig = document.getElementById(name).style.background;
document.getElementById(name).style.background = '#454647';
setTimeout(function(){
document.getElementById(name).style.background = orig;
}, 3000);
this.count = this.count + 1;
// setInterval(function(){(document.getElementById(name).style.background = 'blue')}, 3000);
},
我有2个问题:1.计数器会更新并显示所有卡,而不仅仅是在我单击的那张卡上显示.2.为了定位我要更改背景的卡,我添加了数组[1]以测试该用户是否可以使用该卡,但是我需要一种方法来根据我单击的用户卡进行更改.
I have 2 problems, 1. The counter updates and displays for all cards and not only on the one I'm clicking. 2. In order to target the card I'm clicking on to change background I added arrays[1] to test it working on that user but I need a way for it to change according to the user card I clicked on.
非常感谢!
推荐答案
因此,每张卡/人需要单独的计数器,例如:
So you need individual counters per card/person like:
data () {
return {
arrays: [
{
name: 'John',
count:0
},
{
name: 'Alice',
count:0
}
]
...
然后您可以将数组的索引传递给函数,如:
Then you can pass the index of the array to your function like:
<div class="card" v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
<div class="l" v-on:click="greet(index)" >Alert{{arrays[index].count}}</div>
</div>
然后
greet: function (arrIndex) {
//var name = this.arrays[1]['name'];
var orig = document.getElementById(this.arrays[arrIndex].name).style.background;
setTimeout(function(){
document.getElementById(this.arrays[arrIndex].name).style.background = orig;
}, 3000);
this.arrays[arrIndex].count++
//this.count = this.count + 1;
// setInterval(function(){(document.getElementById(name).style.background = 'blue')}, 3000);
}
这篇关于Vue @click计数器并为可重用组件更新背景2分钟的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!