Question

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

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

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

我正在使用simple-vue-validator btw。

这是令人难以置信的组件，我使用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是摇动的动画类，具有成功和具有危险性只是改变其外观。

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的功能。

Submit函数只是调用上面的两个函数。

我认为这是由于promise的调用，有没有一种方法可以在没有promise的情况下调用$ validate（）？

Answer 1

这里有一些问题。

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

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

什么是validation？我认为应该是this.validation。同样，还有几行。

您的下一个问题在这里：

v-bind:class="{ visualValidation }"

这里的括号正在创建对象文字，因此等效于此：

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

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

v-bind:class="visualValidation"

使用计算的prop Vue 2进行条件类绑定

1 个答案: