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

Question

我有一个可重用的 vue 组件，它基本上是一个用户卡，为多个用户显示一组数据。我想做的是，当 为特定用户单击角落中的单词警报时，该用户卡的背景将改变颜色 2 分钟，然后恢复到之前的状态，但它会在 alert 旁边添加数字 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()" >Alert{{count}}</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] 来测试它在该用户上的工作情况，但我需要一种方法让它根据我点击的用户卡片进行更改。

非常感谢！

Answer 1

所以你需要每个 card/person 单独的计数器，例如：

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)" >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 分钟

Vue @click counter and update background for 2 minutes for reusable component

counter

components

onclick

setinterval

vue.js