时间戳

首页 > 解决方案 > 如果输入字段大于另一个字段，则禁用按钮

vue.js - 如果输入字段大于另一个字段，则禁用按钮

问题描述

我正在尝试检查输入 A 是否大于输入 B，如果发生这种情况，请禁用按钮以及是否未启用

html:

<input  v-model="form.a" />
<input  v-model="form.b" />
<button :class="{disabled: btnDisabled}">Enviar</button>

VueJs：

<script>
import { required, minLength } from 'vuelidate/lib/validators';

export default {
    created() {
        
    },
    data: function() {
        return {
            btnDisabled: false,
            form: {
                a: '',
                b: ''
            }
        }
    },
    methods: {
        checkEndBillNumber() {
            if(this.form.a > this.form.b) {
                // I do not know what I should put here
            }
            else {
               // I do not know what I should put here
            }
        }
    }
}
</script>

如果你看到我不知道我应该做什么，并且在 vuejs 条件下禁用按钮，如果条件为真或假。

我怎样才能做到这一点？谢谢！

标签： vue.jsvuejs2vuejs3

解决方案

disabled按钮 get 中的属性，true因此false您可以执行以下操作：

<input v-model="form.a" />
<input v-model="form.b" />

<button :disabled="isDisabled">Enviar</button>

computed: {

 isDisabled() {
  const result = this.form.a > this.form.b ? true : false;
  return result;
 }

}

或者如果你想添加一个类，你可以这样做：

<button :class="{ 'yourClassName': isDisabled }">Enviar</button>

推荐阅读