Почему мой переход vue Leave не работает?

Я использую vee validate для проверки формы. я использую переход vue для отображения ошибок проверки, например:

 <input type="text" name="name" v-validate="'required'">
<transition name="slide-fade">
  <div v-show="errors.has('name')">{{ errors.first('name') }}</div>
</transition>

CSS:

    .slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

Теперь, когда появляется ошибка, переход работает, но когда ошибка исчезает, переход не работает. почему это происходит?


javascript vue.js vee-validate
person Rakesh Kohali    schedule 17.03.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Переход работает. Вы видите, что он внезапно становится пустым, потому что больше нет errors.first('name') для отображения.

Когда вы добавляете какую-то другую строку вдоль errors.first('name'), скажем, Error:, становится ясно.

Vue.use(VeeValidate);
new Vue({
  el: '#demo'
})
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="demo">
  Type something and then erase. And then type again.
  <input type="text" name="name" v-validate="'required'">
  <transition name="slide-fade">
    <div v-show="errors.has('name')">Errors: {{ errors.first('name') }}</div>
  </transition>
</div>


Если ты действительно должен...

Примите во внимание объем дополнительного кода, но если вам действительно необходимо это сделать, вам придется добавить наблюдение к значению input и записать первую ошибку, когда она произойдет.

vee-validate не предоставляет слушателей ошибок, так что это так же хорошо, как и сейчас. См. демо ниже.

Vue.use(VeeValidate);
new Vue({
  el: '#demo',
  data: {
    name: "Erase me",
    nameError: ""
  },
  watch: {
    name() {
      // two ticks at least, because vee-validate takes one tick to validate
      Vue.nextTick().then(Vue.nextTick()).then(() => {
        if (this.errors.has('name')) { this.nameError = this.errors.first('name'); }
      });
    }
  }
})
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="demo">
  Erase and error will appear. Type again and error will leave.<br>
  <input type="text" name="name" v-validate="'required'" v-model="name">
  <transition name="slide-fade">
    <div v-show="errors.has('name')">Errors: {{ nameError }}</div>
  </transition>
</div>

person acdcjunior    schedule 17.03.2018
comment
В настоящее время я застрял в аналогичной проблеме, мои переходы Vue не запускаются, однако мои данные кажутся реактивными. Было бы здорово, если бы вы могли взглянуть на это и поделиться своими мыслями о том, где я ошибаюсь stackoverflow.com/questions/51022673/ - person Hardik; 25.06.2018

arrow_upward
1
arrow_downward

Это довольно старая тема, но я нашел гораздо более простое решение, которое будет работать с минимальным количеством кода для всех, кто все еще ищет его.

Что это делает, проверяет сообщение об ошибке каждый раз, когда вы нажимаете клавишу на входе (событие @keypress), сохраняет его в переменную, которая отображается вместе с фактическим сообщением об ошибке в div, используя ИЛИ, удостоверяясь, что переменная error.message никогда не получает undefined. Это ИЛИ гарантирует, что что-то будет отображаться, даже если фактическая ошибка (выданная VeeValidate) недоступна, вплоть до завершения анимации.

Vue.use(VeeValidate);
new Vue({
  el: '#demo',

  data() {
    return {
      error: {
        name: null,
      },
    }
  },

  methods: {
    updateError() {
      const message = this.errors.first('name');

      if (message) { // check if message isn't undefined
        this.error.name = message;
      }
    },
  },
});
.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="demo">
  Type something and then erase. And then type again.
  <input type="text" name="name" v-validate="'required'" @keypress="updateError()"><!-- added keypress event -->
  <transition name="slide-fade">
    <div v-show="errors.has('name')">Errors: {{ errors.first('name') || error.name }}</div><!-- OR -->
  </transition>
</div>

И если у вас есть несколько входных данных, вы можете сделать это: передать переменную '$event' в функцию updateError() (становится updateError($event)) и принять ее в объявлении. Затем используйте srcElement, чтобы получить исходный элемент, который запустил это событие нажатия клавиши (в нашем случае вход), и получить его имя/класс/идентификатор/что угодно; в зависимости от этого вы можете изменить соответствующую переменную (в нашем случае error.name и error.email). Остальное прямо вперед.

Vue.use(VeeValidate);
new Vue({
  el: '#demo',

  data() {
    return {
      error: {
        name: null,
        email: null,
      },
    }
  },

  methods: {
    updateError(e) {
      const input = e.srcElement.name;
      const message = this.errors.first(input);

      if (message) { // check if message isn't undefined
        if (input === 'name') {
          this.error.name = message;
        } else if (input === 'email') {
          this.error.email = message;
        }
      }
    },
  },
});
.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 0 0 45%;
  max-width: 45%;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="demo" class="row">
  <div class="col">
    Type a name and then erase. And then type again.
    <input type="text" name="name" v-validate="'required'" @keypress="updateError($event)">
    <!-- added keypress event -->
    <transition name="slide-fade">
      <div v-show="errors.has('name')">Errors: {{ errors.first('name') || error.name }}</div>
      <!-- OR -->
    </transition>
  </div>

  <div class="col" style="border-left: 2px solid black; padding-left: 10px">
    Type an email and then erase. And then type again.
    <input type="text" name="email" v-validate="'required'" @keypress="updateError($event)">
    <!-- added keypress event -->
    <transition name="slide-fade">
      <div v-show="errors.has('email')">Errors: {{ errors.first('email') || error.email }}</div>
      <!-- OR -->
    </transition>
  </div>
</div>

Я надеюсь, что это помогло вам!

person Andrei Hirbu    schedule 23.04.2019