我的网站上有一个按钮，可以为用户提供奖金。我需要在一个按钮中设置几个条件。
如果是heal_used = 1或diff < 1，则必须禁用该按钮。我试着这样做：
<button v-if="heal_used 1" :disabled="diff < 1" v-else class="btn btn--small btn--purple" @click="takeBonus">Take</button>
但什么都没用。此外，如果该按钮处于活动状态，并且用户可以获得奖金，则在奖金之后，您需要使该按钮处于非活动状态。我是这样做的：
if (data.type === 'success') {
this.bonus_num = data.bonus_num;
this.heal_used = data.heal_used;
this.$forceUpdate();
}
这是真的吗？你能帮我做两个条件吗？
更新
我将代码更改为：
<button class="btn btn--small btn--purple" :disabled="isDisabled" @click="takeBonus">Take</button>
并添加：
computed: {
isDisabled() {
return this.heal_used = 1 || this.diff < 10;
},
}，
控制台日志告诉我：
console.log(data.heal_used);
console.log(data.diff);
0
17
但按钮仍然是；残疾人，怎么了？
更新takeBonus:
takeBonus() {
this.$root.axios.post('/user/takeBonus', {
value: this.user.cashback
})
.then(res => {
const data = res.data;
if (data.type === 'success') {
this.bonus_num = data.bonus_num;
this.$root.user.balance = data.newBalance;
this.heal_used = data.heal_used;
this.$forceUpdate();
}
this.$root.showNotify(data.type, this.$t(`index.${data.message}`));
})
},
new Vue({
el: '#example',
data: {
heal_used : 4,
diff: 3
},
methods: {
takeBonus1: function () {
this.heal_used=1;
this.diff=0;
},
takeBonus2: function () {
this.heal_used=1;
this.diff=4;
},
takeBonus3: function () {
this.heal_used=2;
this.diff=.1;
},
reset: function () {
this.heal_used=4;
this.diff=3;
}
}
})<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="example">
<p>
<span>heal_used: {{ heal_used }}</span>
<span>diff: {{ diff }}</span>
</p>
<button
@click="takeBonus1()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (both)
</button>
<br>
<button
@click="takeBonus2()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (heal_used===1)
</button>
<br/>
<button
@click="takeBonus3()"
:disabled="heal_used===1 || diff < 1" >
Take bonus (diff < 1)
</button>
<br>
<button
@click="reset()">
Reset
</button>
</div>
</body>