Question

在我的vue组件中，我有一个bids的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);

 }

现在我如何循环投标，获得最高出价并将其存入highBid？

还有什么是存储代码的最佳位置？

AXIOS在mount（）或其他地方获取请求之后？

对不起，我很抱歉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调用。

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

Answer 2

尝试此代码。

 //params is object
 findWinConfirmed(topConfirmed) {
  let findTop = [];
  topConfirmed.data.forEach(obj => findTop.push(obj.bid));
  return Math.max(...findTop);
}

希望是帮助。

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

2 个答案: