arrays - 获取 JSON 数组的最大值并将其存储在 Data Vue 中

Question

在我的 vue 组件中，我有一个 json 出价数组。

我需要从数组中获取最高出价并将其存储到另一个变量中。

我的vue组件数据:

data() {
  return {
    bids: [],
    bid: null,

    veiling_id: this.id,
    showInput: this.auth_check,

     highestBid: null,
  }
},

从数据库中获取出价并存储到出价中。

mounted(){
    var veilingid = this.veiling_id;
    var vm = this;
    setInterval(function(){
        axios.get('/veilingen/' + veilingid + '/getbid').
        then(function (response){
            vm.bids = response.data;
        }).catch(function(error) {
            console.log(error);
        });
     }, 1000);

 }

现在我如何遍历出价，获得最高出价并将其存储到 highestBid 中？

另外，存储代码的最佳位置是什么？

在 AXIOS 在 mounted() 或其他地方获取请求之后？

很抱歉我是 Vue 的新手。

感谢任何帮助..

请求的 JSON:

"[{"id":1,"veiling_id":1,"bid":"100.00","user_id":2,"created_at":"2017-08-31 20:24:20","updated_at":"2017-08-31 20:24:20"},{"id":2,"veiling_id":1,"bid":"40.00","user_id":2,"created_at":"2017-08-31 20:43:11","updated_at":"2017-08-31 20:43:11"},{"id":3,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:43:34","updated_at":"2017-08-31 20:43:34"},{"id":4,"veiling_id":1,"bid":"4.34","user_id":2,"created_at":"2017-08-31 20:44:32","updated_at":"2017-08-31 20:44:32"},{"id":5,"veiling_id":1,"bid":"900.00","user_id":2,"created_at":"2017-08-31 20:44:49","updated_at":"2017-08-31 20:44:49"},{"id":6,"veiling_id":1,"bid":"90.00","user_id":2,"created_at":"2017-08-31 20:51:55","updated_at":"2017-08-31 20:51:55"},{"id":7,"veiling_id":1,"bid":"90.00","user_id":2,"created_at":"2017-08-31 20:53:10","updated_at":"2017-08-31 20:53:10"},{"id":8,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:53:18","updated_at":"2017-08-31 20:53:18"},{"id":9,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:53:59","updated_at":"2017-08-31 20:53:59"},{"id":10,"veiling_id":1,"bid":"50.00","user_id":2,"created_at":"2017-08-31 21:03:17","updated_at":"2017-08-31 21:03:17"},{"id":11,"veiling_id":1,"bid":"1000.00","user_id":2,"created_at":"2017-08-31 21:05:35","updated_at":"2017-08-31 21:05:35"},{"id":12,"veiling_id":1,"bid":"2000.00","user_id":2,"created_at":"2017-09-01 00:07:19","updated_at":"2017-09-01 00:07:19"},{"id":13,"veiling_id":1,"bid":"3.00","user_id":1,"created_at":"2017-09-01 00:28:56","updated_at":"2017-09-01 00:28:56"}]"

Answer 1

这是 computed property 的一个很好的用例.

computed:{
  highestBid(){
    if (this.bids.length == 0) return 
    return this.bids.reduce((a,b) => Number(a.bid) > Number(b.bid) ? a : b)    
  }
},

这是一个如何工作的例子。

console.clear()

const bids = [
  {bid: 2000},
  {bid: 1000},
  {bid: 3000},
  {bid: 4000},
  {bid: 100},
  
]

new Vue({
  el: "#app",
  data() {
    return {
      bids: [],
    }
  },
  computed:{
    highestBid(){
      if (this.bids.length == 0) return 
      return this.bids.reduce((a,b) => Number(a.bid) > Number(b.bid) ? a : b)     
    }
  },
  mounted(){
    setTimeout(() => {
      this.bids = bids
    }, 250)
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  {{highestBid}}
</div>

在上面的示例中，每当 bids 被填充或更改时，highestBid 将返回具有最高值的出价对象。 setTimeout 只是模拟 ajax 调用。

您可以在挂载或创建中执行 API 调用。

另请注意，我注意到您将出值(value)作为字符串返回，因此代码使用 Number() 将它们转换为数字。在 javascript 中有许多方法可以转换为数值，您可以研究最适合您的方法。