Можно ли привязать класс к элементу на основе логического выражения? - PullRequest
Новая
       6

Можно ли привязать класс к элементу на основе логического выражения?

0 голосов
/ 02 ноября 2018

Я хочу связать класс с элементом на основе результата логического выражения. Например: 

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

Но «неверный» класс не добавляется к элементу, если я оцениваю оба условия; это работает, только когда я оцениваю одно или другое, например: 

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

или 

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

работает просто отлично. Я понимаю, что мог бы использовать вычисляемые свойства для этого, но мне нужно было бы создать вычисляемое свойство для каждого поля в моей веб-форме, и это кажется избыточным. Есть ли лучший способ?

Ответы [ 3 ]

0 голосов
/ 02 ноября 2018

Ваш код 

<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 }">
0 голосов
/ 02 ноября 2018

Я думаю, что нашел довольно хорошее решение. Я использовал метод с аргументом вместо вычисляемых свойств: 

<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>
0 голосов
/ 02 ноября 2018 
<input type="email" :class="{ invalid: formValid($v.email.$error) }">

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

Не могли бы вы проверить это, интересно, если это сработает, тогда вам просто нужно передать параметр и нужен один Computed.

...