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

by

0👍

✅

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.

On the template-side I added v-if and v-else as you will see below.

Lastly mounted life-cycle is just pretending to be your ajax request so it is where the data are inserted.

Here is the code:

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>

Leave a comment