如果我已经声明了以下json数据的报价,如何显示声明?

By simon at 2018-02-28 • 0人收藏 • 32人看过

所有优惠将从以下网址获得 http://127.0.0.1:8000/get/offers/

{"status": true, "data": [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}, {"offerId": 11, "postId": 136, "offer": "/offer/1519650547.8423202_13573589eceab62.jpg"}, {"offerId": 16, "postId": 115, "offer": "/offer/1519712602.7171123_F8.png"}, {"offerId": 15, "postId": 115, "offer": "/offer/1519712519.1032581_F3.png"}]}
我提出的要约ALREADY是从以下网址获得的 http://127.0.0.1:8000/get/my/offer/
{"status": true, "data": [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}]}
我的html代码是
<div id="offers">
<div  v-for="ofr in offer">
{{ofr.offerId}}
  <button @click="handelSubmit(ofr)">Claim Now</button>
</div>
</div>
所以,如果是e用户已经声明了该提议,而不是按钮,我应该 显示已经声称。我怎么能够实现相同的。 我的vue js代码是
$.ajax({
    url: "http://127.0.0.1:8000/get/offers/",
    data: data,
    type: "POST",
    dataType: 'json',
    success: function(e) {
      if (e.status == 1) {
        self.offer = e.data;
      },
    });
}

$.ajax({
  url: "http://127.0.0.1:8000/get/my/offer/",
  data: data,
  type: "POST",
  dataType: 'json',
  success: function(e) {
    if (e.status == 1) {}
    self.myoffer = e.data;
  },
});
我保存所有报价:[]和我已经在myoffers声称的优惠: []。 所以,如果我有已经声明了优惠,我应该显示而不是按钮 已经声称。

2 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

所以要分解,我认为你有你的handleSubmit方法,然后我补充说 validateOffer方法来区分哪些是claimed和not。我承担了 报价是由offerId和postId独特的,这就是为什么我需要这两个 他们检查是平等的。 Ø在模板端,我添加了v-if和v-else,如下所示。 最后mounted的生命周期只是假装成你的ajax请求如此 它是插入数据的地方。 代码如下:

new Vue({
  el: "#offers",
  data: {
    offer: [],
    myoffers: []
  },
  methods: {
    handleSubmit: function(ofr) {
      // You can validate offerId and postId to avoid duplicate objects inside.
    	this.myoffers.push(ofr);
    },
    validateOffer: function(ofr) {
    	var ret = false;
      for(var i in this.myoffers) {
        // I assume they are unique by offerId and postId
        if (this.myoffers[i].offerId === ofr.offerId
        		&& this.myoffers[i].postId === ofr.postId) {
          ret = true;
          break;
        }
      }
      return ret;
    }
  },
  // Assume here are your ajax calls
  mounted: function() {
    this.offer = [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}, {"offerId": 11, "postId": 136, "offer": "/offer/1519650547.8423202_13573589eceab62.jpg"}, {"offerId": 16, "postId": 115, "offer": "/offer/1519712602.7171123_F8.png"}, {"offerId": 15, "postId": 115, "offer": "/offer/1519712519.1032581_F3.png"}];
    this.myoffers = [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}];
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="offers">
<div  v-for="ofr in offer">
  {{ofr.offerId}}
  <span v-if="validateOffer(ofr)">Claimed!</span>
  <button @click="handleSubmit(ofr)" v-else>Claim Now</button>
</div>
</div>

2018-02-28   #2

所以要分解,我认为你有你的handleSubmit方法,然后我补充说 validateOffer方法来区分哪些是claimed和not。我承担了 报价是由offerId和postId独特的,这就是为什么我需要这两个 他们检查是平等的。 Ø在模板端,我添加了v-if和v-else,如下所示。 最后mounted的生命周期只是假装成你的ajax请求如此 它是插入数据的地方。 代码如下:

new Vue({
  el: "#offers",
  data: {
    offer: [],
    myoffers: []
  },
  methods: {
    handleSubmit: function(ofr) {
      // You can validate offerId and postId to avoid duplicate objects inside.
    	this.myoffers.push(ofr);
    },
    validateOffer: function(ofr) {
    	var ret = false;
      for(var i in this.myoffers) {
        // I assume they are unique by offerId and postId
        if (this.myoffers[i].offerId === ofr.offerId
        		&& this.myoffers[i].postId === ofr.postId) {
          ret = true;
          break;
        }
      }
      return ret;
    }
  },
  // Assume here are your ajax calls
  mounted: function() {
    this.offer = [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg", "expiry": "2018-03-03T00:00:00Z", "limit": 110, "created_at": "2018-02-26"}, {"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}, {"offerId": 11, "postId": 136, "offer": "/offer/1519650547.8423202_13573589eceab62.jpg"}, {"offerId": 16, "postId": 115, "offer": "/offer/1519712602.7171123_F8.png"}, {"offerId": 15, "postId": 115, "offer": "/offer/1519712519.1032581_F3.png"}];
    this.myoffers = [{"offerId": 10, "postId": 80, "offer": "/offer/1519649835.361355_13573589eceab62.jpg"}];
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="offers">
<div  v-for="ofr in offer">
  {{ofr.offerId}}
  <span v-if="validateOffer(ofr)">Claimed!</span>
  <button @click="handleSubmit(ofr)" v-else>Claim Now</button>
</div>
</div>

登录后方可回帖

Loading...