- 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 - есть идеи, что может вызвать эту проблему?