Question 36087 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Disable button if value from API is zero Vue – Jquery

I have set of buttons getting live probability odds of an event for the user to select.
The buttons get data from an api every minutes.

Here's how it looks

I want to disable the button if the probability is zero, I have a class suspended, I want to add that class to the button.

This is the code I have so far.

event.vue

<div class="inply-coupon-odds-column">
 <span data-id="118584087800" class="bvs-button-multi-sport " clicksource="in-play">{{tgames.home_odd }}</span>
 <span data-id="118584088300"  class="bvs-button-multi-sport " clicksource="in-play">{{tgames.neutral_odd }}</span>
 <span data-id="118584088000"  class="bvs-button-multi-sport" clicksource="in-play">{{tgames.away_odd }}</span>
</div>

This the json response from the api call.

{"neutral_odd":"0.00","home_odd":"1.38","away_odd":"2.75"}

Will appreciate any solutions.

Tags:

2

Answers


  1. 0

    you can easily achieve this by using Vue’s class binding.

    Class binding allows you to dynamically add / remove css classes from the dom element. Refer to the Official Docs
    Vue Class Binding

    So in your case, you can try adding the suspended class by checking if the value is 0 like so

    <div class="inply-coupon-odds-column">
    <span
      data-id="118584087800"
      class="bvs-button-multi-sport"
      :class="tgames.home_odd == 0 ? 'suspended' : ''"
      clicksource="in-play"
      >{{ tgames.home_odd }}</span
    >
    <span
      data-id="118584088300"
      class="bvs-button-multi-sport"
      :class="tgames.neutral_odd== 0 ? 'suspended' : ''"
      clicksource="in-play"
      >{{ tgames.neutral_odd }}</span
    >
    <span
      data-id="118584088000"
      class="bvs-button-multi-sport"
      :class="tgames.away_odd == 0 ? 'suspended' : ''"
      clicksource="in-play"
      >{{ tgames.away_odd }}</span
    >
</div>
    Login or Signup to reply.
  2. 0

    You can achieve this requirement by using Dynamic HTML class binding.

    Just for demo, I am using iteration index as data-id nut you can replace it as per your requirement.

    Live Demo :

    Vue.createApp({
  data: () => ({
    tgames: {
      "neutral_odd":"0.00",
      "home_odd":"1.38",
      "away_odd":"2.75"
    }
  })
}).mount('#app')
    .bvs-button-multi-sport {
  border: 1px solid blue;
  padding: 5px;
}

.suspended {
  cursor: not-allowed;
  background-color: rgb(229, 229, 229) !important;
}
    <script src="https://unpkg.com/vue@3"></script>

<div id="app">
  <div class="inply-coupon-odds-column">
    <span
      v-for="(item, index) in Object.keys(tgames)"
      :key="index"
      :data-id="index"
      class="bvs-button-multi-sport"
      :class="!Number(tgames[item]) ? 'suspended' : ''"
      clicksource="in-play">
      {{ tgames[item] }}
    </span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search