0

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

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

但是，如果我同时评估这两个条件，则不会将“无效”类添加到元素中；它仅在我评估一个或另一个时才有效，例如：

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

或者

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

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

4

3 回答 3

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

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

你能测试一下吗，我很好奇它是否可行，那么你只需要传递一个参数并需要一个 Computed。

于 2018-11-02T06:46:34.137 回答
0

你的代码

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

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

通常$表示实例属性，如data、el、root、children等。例如，要访问您的 Vue 实例安装在哪个元素上，您可以使用this.$el。所以你可以像这样修改你的代码 -

<input type="email" :class="{ invalid: submitted && $data.$v.email.$error }">
于 2018-11-02T07:06:50.617 回答
0

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

<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>
于 2018-11-02T07:36:38.003 回答