Question

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

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

但是，如果我同时评估两个条件，则不会将“无效”类添加到元素中；仅当我评估其中一个时，它才起作用，例如：

<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
            }
         }     
    }

您是否会对它是否可行感到好奇，所以您只需要传递一个参数并需要一个Compute。

Answer 2

您的代码

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

这里的问题是，即使您在本地状态中定义了 $ v ，Vue也无法找到它。尝试在您的 data 属性中定义本地状态，且不带美元符号。因为 $ 在Vue中具有额外的含义。

通常 $ 表示实例属性，例如数据， el ， root ，子级 >等例如，要访问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>

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

3 个答案: