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