Форма Vuetify с компонентом проверки отображается при загрузке страницы, несмотря на v-if - PullRequest
Новая
       8

Форма Vuetify с компонентом проверки отображается при загрузке страницы, несмотря на v-if

0 голосов
/ 26 января 2020

У меня есть компонент (кнопка с пользовательским стилем), который я хочу показать, когда форма успешно проверена с использованием правил vuetify:. Однако, каким-то образом при использовании перехода для плавного отображения компонента, при начальной загрузке страницы он на короткое время отображает этот компонент, а затем исчезает. Это не происходит, если я не использую переход (хотя он остается невидимым при загрузке страницы).

После этого он работает нормально, но я не хочу, чтобы он кратковременно появлялся при начальной загрузке страницы.

Вот форма: 

 <v-form
     ref="form"
     v-model="valid"
     :lazy-validation="lazy" 
     >
        <v-text-field
                v-model="sepalLength"
                label="Sepal Length"
                required
                :rules="numberRule"
         ></v-text-field>

     <transition name="fade">
          <new-button v-if="valid"></new-button>
     </transition>
</v-form>

И css для перехода 

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>

РЕДАКТИРОВАТЬ, вот модель данных для проверки: 

data: () => ({
        valid: true,

        numberRule: [
          v => !!v || 'Required',
          v => (!isNaN(parseFloat(v))) || 'Must be float']
      }),
...