使用 vuetify watch 选项检查多种形式的有效性？

Question

我在页面上有一个按钮应该被禁用，除非页面上的每个表单都被视为 'valid' 通过惰性验证。假设我有三种具有以下 v-model 属性的表单：'contactValid、'addressValid' 和 'infoValid'。如果任何道具从 true 变为 false，我想要观察一些东西，如果有任何道具为 false 则禁用按钮。数据和条件看起来像这样：

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

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

如何使用 watch 来完成此操作？或者我需要换一种方式吗？

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 选项检查多种形式的有效性？

Check validity of multiple forms with vuetify watch option?

vue.js

vuetify.js

watch