如何使用 vue.js 在列表中添加 2 个数字

Question

How can I add the first 5 numbers that my list take from the url and then calcuate the average. What i mean is taking the average values per 5 minutes, 30 minutes,60 minutes. I made a delay 1 minute so at the first 5 minutes in my list there should be 5 values. Then I want to show in 3 different templates the average of the values I take.

<template>
  

<div id="app" >
  
 
  <form>
    
    <label>Enter Currency: <input type="text" v-model="currency"></label>
    <input id="clickMe" type="button" value="Submit"  @click="getData(currency) "/>
    
    
    
    
  </form>
  
  <pre></pre><p>Bitcoin Value is : {{ apiData?.data?.amount }}</p>
  

  <template v-for="value in getShortList(5)">
    <pre></pre><p>Last 5 minute value is : {{ }} </p>
    <li class="divider" role="presentation"></li>
  </template>

  <template v-for="item in getShortList(29)">
    <pre></pre><p>Last 30 minute value is : {{parseInt (getShortList(29))}}</p>
    <li class="divider" role="presentation"></li>
  </template>

  <template v-for="item in getShortList(59)">
    <pre></pre><p>Last 60 minute value is : {{ parseInt (getShortList(59)) }}</p>
    <li class="divider" role="presentation"></li>
  </template>



 

  <template>
<div>
  <apexchart width="500" type="bar" :options="options" :series="amountList"></apexchart>
</div>
</template>



  
</div>



</template>

My script code is above:

 import axios from 'axios'
 

export default {
  
 
 
  data() {
    return {
      apiEndPoint : 'https://api.coinbase.com/v2/prices/spot?currency=',
      apiData: [],
      amountList: [],
      
       
      
      
      
    
    }
  },
  

  created () {
   


    
    this.getData(this.currency);

   
   
  }
,
 
  

  methods: {
    getShortList(shortListSize) {
      return this.amountList.slice(0, shortListSize);
      
     

    },

    

    getData(currency) {

     
      axios.get(`${this.apiEndPoint}${currency}`).then((response) => {
        
        this.timer = setInterval(() => {
   
        this.apiData = response.data
        this.amountList.push(response.data.data.amount)
        

        console.log(this.amountList)
      }, 5000) 
        })
       
    
  
        
    
      }
      
    }
  }


  


   
</script>

Answer 1

As per my understanding and by the comments you added, You are facing challenge in getting the average of the array ( this.amountList ) items. If Yes, you can achieve that with the help of Array.reduce() method.

Live Demo :

 // spliced amountList which contains 5 items. const arr = [100, 200, 30, 44, 50]; // Find the average const average = arr.reduce((a, b) => a + b, 0) / arr.length; // output console.log(average);

Once you get the average, You can make this reactive by assigning the value to a data object property.