如果字段包含数字，如何禁用按钮？VUE JS

罗恩·米拉诺·奎里米特

我想问一下当字段包含数字时如何禁用按钮吗？我的示例代码是：

disabledSubmitButton() {
  return this.$v.$error ||
    this.firstName === '' ||
    this.lastName === '' ||
    this.birthDate === '' ||
    this.province === '' ||
    this.$v.birthDate.$error ||
    this.city === '' ||
    this.nationality === '' ||
    this.mobileNumber === ''
}

这里发生的是，如果遇到此语句，它将禁用按钮。我应该添加什么？谢谢。ps。我不能使用类型或v-on：由于pwa在移动设备上运行而导致按键，使用v-on按键仅适用于浏览器。请帮忙谢谢！

伊法鲁基

您可以使用计算的属性来做到这一点。

new Vue({
   el: "#app",
   data: {
      input: ""
   },
   computed: {
      disabled() {
         return /\d/.test(this.input)
      }
   }
})

button {
   background: none;
   border: none;
   border:1px solid #dadada;
   border-radius: 4px;
   padding: 20px;
   cursor: pointer;
}

.disabled {
   pointer-events: none;
   background: lightgrey !important;
   color: grey !Important;
   border: 1px solid rgba(0,0,0,0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <input v-model="input" />
   <button :class="{ disabled }">Click</button>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。