Как использовать переходную группу vue.js с vee-validate? - PullRequest
0 голосов
/ 20 января 2019
  • vee-validate: 2.0.0
  • vue: 2.4.2
  • Bootstrap-sass v. 3.3.7

https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

То, чего я пытаюсь добиться, - это анимация переходной группы, похожая на ту, что показана в ссылке выше - ту, где при удалении или добавлении элемента массива перемещается весь список.

Эта анимация работает со списком полей ввода, которые отображаются с помощью v-for.

Но внезапно, когда я добавляю v-validate в поле ввода, анимация перемещения не работает при удалении одного поля ввода из списка - поле просто исчезает.

Это мой код:

<transition-group name="interval-list" tag="div">
                    <div v-for="(interval, index) in interval" v-bind:key="interval.id" class="interval-list-item row">
                            <div class="col-sm-10 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        {{index + 1}}.
                                    </span> 

                                   <input v-validate="{required: true, max: 50}" 
                                     v-bind:key="interval.id" 
                                     type="text" class="form-control" 
                                     v-bind:value="interval.name" 
                                     v-on:input="updateSingleIntervalName(index, $event)">
                                </div>
                                <div>
                                    <div class="error">
                                        {{errors.first('intervals'+interval.id)}}
                                    </div>
                                </div>
                            </div>
                    </div>
</transition-group>

Обратите внимание, что с проверкой поля проблем нет - ошибки работают должным образом.Каким-то образом vee-validate мешает анимации v-move - есть идеи, что может вызвать эту проблему?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...