Question

我在页面上有一个按钮，除非通过惰性验证将页面上的每个表单都视为“有效”，否则应该禁用该按钮。假设我具有以下v模型道具的三种形式：“ contactValid”，“ addressValid”和“ infoValid”。我要注意一些道具是否从true变为false，以及是否有false禁用按钮。数据和条件如下所示：

data: () => ({
  formsValid: false,
  contactValid: false,
  addressValid: false,
  infoValid: false,
})

if (contactValid && addressValid && infoValid){
 infoValid = true;
}

如何使用手表来做到这一点？还是我需要另一种方式？

Answer 1

使用vue计算属性：

  data: () => ({
     infoValid: false,
     contactValid: false,
     addressValid: false
  }),
  computed: {
     formsValid() {
       if (this.infoValid && this.contactValid && this.addressValid){
         return true;
       }
       return false;
     },
  }

Answer 2

使用计算所得的属性。

<button :disabled='shouldDisable'>Hello</button>

computed: {
   shouldDisable() {
      return !this.contactValid || !this.addressValid || !this.infoValid;
   }
}

使用Vuetify Watch选项检查多种形式的有效性？

2 个答案: