我有一組按鈕獲取事件的實時概率賠率供用戶選擇。按鈕每分鐘從 api 獲取資料。
如果概率為零，我想禁用按鈕，我有一個類suspended，我想將該類添加到按鈕。
這是我到目前為止的代碼。
事件.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>
這是來自 api 呼叫的 json 回應。
{"neutral_odd":"0.00","home_odd":"1.38","away_odd":"2.75"}
將不勝感激任何解決方案。
uj5u.com熱心網友回復：
我會把它作為一個單獨的組件：
花式按鈕.vue：
<template>
<span
:data-id="dataId"
:class="{ 'bvs-button-multi-sport': true, suspended }"
clicksource="in-play"
v-text="value"
/>
</template>
<script>
import { computed } from "vue"
export default {
props: ['dataId', 'value'],
setup: (props) => ({
suspended: computed(() => ! props.value)
})
}
</script>
并將其用作：
<div class="inply-coupon-odds-column">
<fancy-button
v-for="prop in ['home_odd', 'neutral_odd', 'away_odd']"
:key="prop"
:data-id="getDataIdForProp(prop)"
:value="tgames[prop]"
/>
</div>
uj5u.com熱心網友回復：
您可以通過使用 Vue 的類系結輕松實作這一點。
類系結允許您從 dom 元素中動態添加/洗掉 css 類。參考官方檔案 Vue Class Binding
因此，在您的情況下，您可以嘗試suspended通過檢查值是否0像這樣來添加類
<div class="inply-coupon-odds-column">
<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>
uj5u.com熱心網友回復：
您可以通過使用 Dynamic 來實作此要求HTML class binding。
僅用于演示，我使用迭代索引作為data-id螺母，您可以根據需要替換它。
現場演示：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/526328.html