Vue @click 计数器并为可重用组件更新背景 2 分钟

Posted 2023-02-23

【中文标题】Vue @click 计数器并为可重用组件更新背景 2 分钟

【英文标题】：Vue @click counter and update background for 2 minutes for reusable component

【发布时间】：2020-10-23 17:52:55

【问题描述】：

我有一个可重用的 vue 组件，它基本上是一个用户卡，可以为多个用户显示一组数据。 我想要做的是当点击特定用户角落里的alert一词时，该用户卡的背景将改变颜色2分钟，然后恢复到以前的方式，但它会添加警报旁边的数字 1 并随着每次点击而不断增加。

到目前为止我有：

<div class="card"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
<div class="l"  v-on:click="greet()" >Alertcount</div>

这是我点击警报并显示计数器的地方。

 data () 
    return 
      count: null,
      arrays: [
      
         name: 'John',
      ,
      
        name: 'Alice',
       
      ]

...

还有一个改变颜色和计数器的功能：

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] 以测试它在该用户上的工作，但我需要一种方法来根据我单击的用户卡片进行更改。

非常感谢！

【参考方案1】：

因此，您需要每张卡/每个人都有单独的计数器，例如：

data () 
    return 
      arrays: [
      
         name: 'John',
         count:0
      ,
      
        name: 'Alice',
        count:0
       
      ]
     ...

然后您可以将数组的索引传递给您的函数，例如：

<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)" >Alertarrays[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);
    
    

【讨论】：

非常感谢，颜色已正确更改！但是，计数器仍然为所有卡片显示相同的数字，有什么方法可以显示每张卡片被点击了多少次警报？

每张卡需要单独的计数器吗？

是的，我需要每张卡片显示他们的卡片被点击了多少次提醒

@YJay 我编辑了我的代码来做计数器，试试吧。

谢谢！当我尝试单击它时，我收到一条错误消息，上面写着“未捕获的类型错误：无法读取未定义的属性 '2'”。