当我们没有填写表单时 Vuejs 禁用按钮

Question

我想禁用“删除”按钮，但是当我们填写“项目编号表单”区域并单击“查找”时，我想激活“删除”按钮我尝试了一些方法，但它不起作用。有人可以帮助我吗？

！！我解决了!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<b-form-group class="mb-0 mt-3" label-cols-lg="4">
            <button
             
              v-model ="form.ProjectNumber = '' "
                  :disabled="true" 
              class="w-100 btn btn-danger"
              size="sm"
              @click="RemoveProjectQuestion"
            > 
              Remove Project
            </button>

          </b-form-group>

Answer 1

<b-form-group class="mb-0 mt-3" label-cols-lg="4">
            <button
             
              :disabled="form.ProjectNumber ==null || form.ProjectNumber == ''"
              class="w-100 btn btn-danger"
              size="sm"
              @click="RemoveProjectQuestion"
            > 
              Remove Project
            </button>

我来解决

Answer 2

你可以在你的按钮元素中尝试这样的东西 v-bind:class="[condition ? {classA} : {classB}]"

如果您的条件成立，请添加禁用 class 否则您可以将 active class 传递给它

反之亦然，根据您提供的条件

当我们没有填写表单时 Vuejs 禁用按钮

Vuejs Disabled button when we didnt fill form

disabled-input

vue.js

vuejs2