Disable button if value from API is zero Vue-CodePudding

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.

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 >
 <span data-id="118584087800"  clicksource="in-play">{{tgames.home_odd }}</span>
 <span data-id="118584088300"   clicksource="in-play">{{tgames.neutral_odd }}</span>
 <span data-id="118584088000"   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.

CodePudding user response：

I'd make it a separate component:

FancyButton.vue:

<template>
  <span
    :data-id="dataId"
    :
    clicksource="in-play"
    v-text="value"
  />
</template>
<script>
import { computed } from "vue"
export default {
  props: ['dataId', 'value'],
  setup: (props) => ({
    suspended: computed(() => ! props.value)
  })
}
</script>

And use it as:

<div >
  <fancy-button
    v-for="prop in ['home_odd', 'neutral_odd', 'away_odd']"
    :key="prop"
    :data-id="getDataIdForProp(prop)"
    :value="tgames[prop]"
  />
</div>

CodePudding user response：

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 >
    <span
      data-id="118584087800"
      
      :
      clicksource="in-play"
      >{{ tgames.home_odd }}</span
    >
    <span
      data-id="118584088300"
      
      :
      clicksource="in-play"
      >{{ tgames.neutral_odd }}</span
    >
    <span
      data-id="118584088000"
      
      :
      clicksource="in-play"
      >{{ tgames.away_odd }}</span
    >
</div>