Question

我有一个显示加密货币的简单组件，我希望每秒更新一次（并反映更新的值）。我可以显示金额，但我每秒加1的功能不起作用。我用alert()之类的其他东西进行了测试，结果正常。是我的选择器吗？

<template>
  <div>
    <ul class="crypto-list">
      <li v-for="(currency, idx) in currencies" :key="idx" class="currency">
        <span class="currency__acronym">{{ currency.acronym}} </span>
        <h2 class="currency__name">{{ currency.name }}</h2>
        <span class="currency__amount"> {{ currency.amount }} </span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Cryptocurrency',
    data() {
      return {
        currencies: [{
          name: 'Ethereum',
          acronym: 'ETH',
          amount: 1,
        },{
          name: 'ICON',
          acronym: 'ICX',
          amount: 40,
        },{
          name: 'Nano',
          acronym: 'XRB',
          amount: 14,
        }],        
      };
    },

    mounted () {
      this.addNumber();
    },

    methods: {
      addNumber: function() {
        setInterval(function() { 
          this.currencies[0].amount += 1;
          this.currencies[1].amount += 1;
          this.currencies[2].amount += 1;
        }, 1000);
      },
    },
  };
</script>

Answer 1

这里的问题是传递给setInterval函数的函数有不同的上下文。我们可以使用.bind显式分配传递给setInterval的函数的上下文。

addNumber: function() {
    setInterval(function(){ 
      ++this.currencies[0].amount;
      ++this.currencies[1].amount;
      ++this.currencies[2].amount;
    }.bind(this), 1000);
},

修改

对于ES6及更高版本，您可以使用arrow function syntax。

addNumber() { setInterval(() => { ++this.currencies[0].amount; ++this.currencies[1].amount; ++this.currencies[2].amount; }, 1000); },

Answer 2

使用setInterval，每隔x秒运行一次，在你的情况下为1秒，因为你传递了1000作为间隔的参数。

比照setInterval

为什么我的函数不是每秒都更新数据？

2 个答案: