如果我已经从以下 json 数据中领取了报价，如何显示已领取？

Question

所有优惠将从以下url

获得

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"}]}

我领取的优惠已经从以下url

获得

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>

所以，如果用户已经领取了优惠，我应该显示已经领取的内容，而不是按钮。我怎样才能达到同样的效果。

我的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;
  },
});

我将所有报价保存在报价中：[]，并且我已在我的报价中声明的报价：[]。

所以，如果我已经领取了优惠，我应该显示而不是已经领取的按钮。

Answer 1

So to breakdown, I presume you have your handleSubmit method so then I added validateOffer method to distinguish which are claimed and not. I assume the offer is unique by offerId and postId that's why I need both of them to check as equal.

在 template-side 上，我添加了 v-if 和 v-else，如下所示。

最后 mounted life-cycle 只是假装是您的 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>

如果我已经从以下 json 数据中领取了报价，如何显示已领取？

How to display claimed if I have already claimed an offer from the following json data?

html

javascript

vue.js

vue-router

vue-component