如何仅用布尔运算符实现至少一个字段非法时隐藏搜索按钮

你当前实现的逻辑和需求完全相反。现有逻辑用或（||）运算符连接判断条件，含义是「只要任意一个字段满足非null且值为数字类型，filterValid就返回真」，所以只要存在合法字段，就算其他字段类型非法，按钮也会保持可用，这就是你修改第二个选择器为非法状态时按钮不隐藏的原因。

完全可以仅通过布尔运算符实现需求，你的需求可翻译成判断规则：所有非null的字段的值都是数字类型时，搜索按钮才可用，对应实现如下：

filterValid () {
  return (
    (this.tkType === null || typeof this.tkType.value === 'number') &&
    (this.archiveTk === null || typeof this.archiveTk.value === 'number') &&
    (this.fundTk === null || typeof this.fundTk.value === 'number') &&
    (this.tkStatusSend === null || typeof this.tkStatusSend.value === 'number') &&
    (this.tkTypeMessage === null || typeof this.tkTypeMessage.value === 'number')
  )
}

逻辑说明 #

每个字段的独立判断规则为「要么该字段为null，要么该字段的值为数字类型」，所有字段都满足该规则时，filterValid才会返回真。只要存在任意一个非null且值类型不是数字的字段，返回值就为假。

你现有按钮的:disabled="!filterValid"绑定无需修改即可实现按钮禁用效果；如果需要完全隐藏按钮，将绑定规则改为v-if="filterValid"即可。

内容的提问来源于stack exchange，提问作者Yanis