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

Posted 2023-03-07

【中文标题】使用计算属性 Vue 2 的条件类绑定

【英文标题】：Conditional class binding using computed prop Vue 2

【发布时间】：2020-02-07 13:47:50

【问题描述】：

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

如果我尝试这样做：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()？

【参考方案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"

【讨论】：

抱歉，忘记编辑了，所以整个方法有点复杂，并不能真正满足我的目的。我想为点击提交时的验证错误创建一个抖动动画，就是这样。我去更改逻辑以使用类绑定，单击组件时删除类。瞧。但是现在我认为使用promise引起了一个错误，我会将更新的代码放入编辑中。