如何将vue.js过渡组与vee-validate结合使用?

时间:2019-01-20 10:54:39

标签: css vue.js twitter-bootstrap-3

  • 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动画-任何想法可能导致此问题的原因?

0 个答案:

没有答案