空字符串与空字符串,不同的结果-vue2

可以使用计算属性轻松检查输入:

var app = new Vue({
  el: '#app',
  data: {
    phone: null,
    inputText: null
  },
  computed: {
    isDisabled() {
      return (this.phone ? this.phone.length < 9 : true)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="phone" />
  <br /> phone: {{ phone }}
  <br /> isDisabled: {{ isDisabled }}
</div>

直接在按钮上使用计算属性:

<b-button :disabled="isDisabled"></b-button>

顺便说一句:如果您打算进行更高级的表单验证,那么有一些易于使用的库,比如 VeeValidate .

问题是 :disabled 需要一个 true / false (IMO)。但是,您使用的短路计算通常返回最后一个计算表达式(因为它是 && 操作员)。

现在,可以是非布尔值。因此,我认为在你的表达中,你实际上是在返回 "null" (字符串)可能有效 truthy 价值观 残疾人 . 换句话说,相当于真。

如果将表达式修改为以下条件,则可以获得所需的内容。

编辑条件:

 !(phone && phone.length && phone.length >=10).