是否可以将 class 绑定到基于布尔表达式的元素？

Question

我想根据布尔表达式的结果将 class 绑定到一个元素。例如：

<input type="email" :class="{ invalid: submitted && $v.email.$error }">

但是如果我评估这两个条件，"invalid" class 不会添加到元素中；它仅在我评估其中一个时才有效，例如：

<input type="email" :class="{ invalid: submitted }">

或

<input type="email" :class="{ invalid: $v.email.$error }">

工作正常。我意识到我可以为此使用计算属性，但我必须为我的 Web 表单中的每个字段创建一个计算的属性，这似乎是多余的。有没有更好的方法？

Answer 1

<input type="email" :class="{ invalid: formValid($v.email.$error) }">

    computed: {
        formValid(){
           return (val) {
                val && this.submitted ? true : false
            }
         }     
    }

你能不能测试一下我很好奇它是否有效，然后你只需要传递一个参数并需要一个计算。

Answer 2

你的代码

<input type="email" :class="{ invalid: submitted && $v.email.$error }">

这里的问题，即使你在本地状态下定义了$v，Vue 也无法找到它。尝试在您的 data 属性中定义您的本地状态，而不要在前面加上美元符号。因为 $ 在 Vue 中有额外的含义。

一般来说$表示实例属性如data, el, root, children 等例如，要访问你的 Vue 实例挂载在哪个元素上，你可以使用 this.$el。所以你可以像这样修改你的代码 -

<input type="email" :class="{ invalid: submitted && $data.$v.email.$error }">

Answer 3

我想我找到了一个很好的解决方案。我使用了带有参数而不是计算属性的方法：

<template>
  <form @submit.prevent="onSubmit" novalidate>
    <input
      type="email"
      :class="{ invalid: isInvalid($v.email.$error) }"
      v-model.lazy="email">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      email: '',
      submitted: false
    }
  },
  validations: {
    email: {
      required,
      email
    },
  },
  methods: {
    isInvalid (val) {
      return val && this.submitted
    },
    onSubmit () {
      this.submitted = true
      if (!this.$v.$invalid) {
        // do something with the email address
      }
    }
  }
}
</script>

是否可以将 class 绑定到基于布尔表达式的元素？

Is it possible to bind a class to an element based on a boolean expression?

vue.js

vuejs2

vuelidate