使用计算属性 Vue 2 的条件类绑定

Question

我想提供一些表单视觉验证提示，所以我尝试使用类绑定来做到这一点。如果我使用三元内联，它并不能真正满足我对应该发生的情况的要求，但是当我尝试使用计算属性时，它会使所有其他组件消失。

如果我尝试这样做：v-bind:class="[(!validation.hasError('form.fullName'))?'has-success':'has-danger noValid']"

它只触发一次动画和类，然后它们就停留在那里。如果验证出现错误，我想在每次用户单击我的提交按钮时触发 noValid 动画。

顺便说一句，我正在使用 simple-vue-validator。

这是 Godforsaken 组件，我使用 Creative Tim 的 vue now-ui-kit 模板作为基础，并从那里自定义我的方式。这是他们的表单组输入组件，docs here

<fg-input
  class="input-lg"
  :label="validation.firstError('form.fullName')"
  placeholder="Full Name..."
  v-model="form.fullName"
  addon-left-icon="now-ui-icons users_circle-08"
  v-bind:class="{ visualValidation }"
></fg-input>

按钮组件：bootstrap-vue，因为他们自定义的按钮并不能真正满足我的目的

<b-button type="submit" block pill variant="info" @click="submit">Submit Form</b-button>

我的计算：noValid 是抖动动画类，has-success 和 has-danger 只是改变了它们的外观。

computed: {
    visualValidation: function() {
      const successClass = "has-success";
      const errorBoi = "has-danger";
      const shakeBoi = "noValid";
      if (validation.firstError("form.fullName")) {
        return errorBoi + " " + shakeBoi;
      } else if (!validation.hasError("form.fullName")) {
        return successClass;
      }
    }
  }

我认为我返回的变量将作为类绑定到 form.fullName 模型，但它没有做任何事情，更好的是，它使我的所有其他组件都没有呈现。

我应该在这里做什么？我刚开始学习 Vue.js，所以我不太明白这里发生了什么。

从这里编辑：

我将逻辑重写到我的类绑定中，只需使用方法在单击组件时删除类。

这是更新的组件：

<fg-input
              class="input-lg"
              :label="validation.firstError('form.email')"
              placeholder="Email Here..."
              v-model="form.email"
              addon-left-icon="now-ui-icons ui-1_email-85"
              v-bind:class=" {'has-success' : isSuccEmail, 'has-danger' : isFailEmail, 'noValid': validNoEmail} "
              @click="removeShake()"
            ></fg-input>

数据：

isSuccEmail: false,
isFailEmail: false,
validNoEmail: false

方法：

removeShake: function() {
      let vm = this;
      vm.validNoName = false;
      vm.validNoEmail = false;
      console.log(vm.validNoEmail);
      console.log(vm.validNoName);
    },

但是，目前存在一个错误，即验证器不单独验证。它使课程成功通过电子邮件发送，即使它是成功的全名。

    valEmail: function() {
      let vm = this;

      vm.$validate("form.email").then(function(success) {
        if (success) {
          vm.isFailEmail = false;
          vm.isSuccEmail = true;
        } else if (!success) {
          vm.isSuccEmail = false;
          vm.isFailEmail = true;
          vm.validNoEmail = true;
        } else {
          alert("Fatal Error");
        }
      });
    },
    valName: function() {
      let vm = this;

      vm.$validate("form.fullName").then(function(success) {
        if (success) {
          vm.isFailName = false;
          vm.isSuccName = true;
        } else if (!success) {
          vm.isSuccName = false;
          vm.isFailName = true;
          vm.validNoName = true;
          console.log(vm);
        } else {
          alert("Fatal Error");
        }
      });
    }

$validate 是 simple-vue-validator 的一个函数，the docs。

提交函数就是调用上面那两个函数。

我认为这是由于 promise 调用，有没有办法在没有 promise 的情况下调用 $validate()？

Answer 1

这里有一些问题。

首先，虽然模板不要求您使用this.，但您仍然需要在您的 JS 代码中使用它。您应该会在控制台中看到错误，甚至可能在编译时看到错误，具体取决于您配置 linting 的方式。

if (validation.firstError("form.fullName")) {

validation 是什么？我认为应该是this.validation。同样，再往下几行。

你的下一个问题在这里：

v-bind:class="{ visualValidation }"

这里的大括号是创建一个对象字面量，所以它等价于：

v-bind:class="{ visualValidation: visualValidation }"

这将有条件地将字符串 'visualValidation' 添加为 class ，这不是您想要的。摆脱大括号：

v-bind:class="visualValidation"