Question

我想在填写表格时禁用按钮当所有输入都填满时，将使用vuejs和laravel框架启用按钮

我尝试通过简单地使

中的按钮禁用来实现这一点

services.tasks.foo

但是我不知道如何在vuejs中实现

Answer 1

只需将disabled属性绑定到布尔值，例如

<button :disabled='isDisabled'>Send Form</button>

如this example

Answer 2

https://vuejs.org/v2/guide/syntax.html#Attributes

<button type="submit" class="btn btn-info" :disabled="validated">Next</button>

将disabled属性绑定为布尔值（一旦通过验证），或者在您的情况下，所有输入都已填充返回true

Answer 3

您可以使用计算属性来启用/禁用按钮。每次条件在计算所得的属性内发生变化时，将呈现禁用或启用按钮。

  <button type="submit" class="btn btn-info" :disabled="isDisabled">Next</button>

  ...
  ...
</template>

<scrtipt>
  export default {

      computed: {
        isDisabled() {
          // you can  check your form is filled or not here.
          return yourCondition == true
        },
      },
  }
</script>

Answer 4

感谢您的快速回复！罗伊（Roy J），您的解决方案非常有帮助，我按照举足轻重的方法工作了我只有一个最后的问题我想在填写表格时禁用按钮但是，如果我希望禁用按钮，直到客户端检查单选按钮示例，该怎么办：

    <div id="app">
      <p>
    <label for='type'>
          <h4> Etudiant </h4><input type="radio" name="type" v- 
       model="type" id="Etudiant"/> 

            <hr>


          <h4> Doctor </h4><input type="radio" name="type" v- 
           model="type"  id="Doctor"/> 


    </label>
  </p>
  <button :disabled='isDisabled'>Send Form</button>
</div>


    and this is the vue :
new Vue({
  el: '#app',
  data: {
  type:this.checked = false
  },
  computed: {
    isDisabled: function(){
        return !this.type;
    }
  }
})

Answer 5

此代码对我有用。

按钮：-

  <button
                id="myBtn"
                @click="pay()"
                class="btn btn-primary"
                :disabled="!isComplete"
              >
                Pay ${{ this.amount }}
              </button>

在计算中（我检查我的属性是否为空或是否全部填充，我返回 TRUE 导致 ENABLE 按钮）

  isComplete () {
      return (
        this.user_name != '' &&
        this.email != '' &&
        this.phone != '' &&
        this.address != ''
      )
    }

最后，使用以下 CSS

#myBtn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

如何在Vue.js中禁用按钮

5 个答案: