javascript - Vue.js - 无法将日期/时间选择器添加到 vue.js 渲染的 html 元素中

Question

我有一个 Vue.js 组件，其中有一组文本字段(一组标记为“Start”的文本字段和另一个标记为“To”的文本字段)绑定(bind)到 Vue 数组 ( s.timespans) 。

我想要的是，当我通过向 ( s.timespans ) 数组添加元素来添加另一组文本字段时，所有文本字段都会获得日期/时间选择器。但不幸的是，现在只有第一组字段获得日期/时间选择器，而其他组则没有。这样做的正确方法是什么？

提前致谢。

<template id="settings">
<div v-for="(k,slot) in s.timespans" class="row mb5">
            <div class="col-sm-5">
                <label><?php _e( 'From', 'smps' ); ?></label>
                <input type="text" class="datepicker form-control" v-model="slot.from">
            </div>
            <div class="col-sm-5">
                <label><?php _e( 'To', 'smps' ); ?></label>
                <input type="text" class="datepicker form-control" v-model="slot.to">
            </div>
            <div class="col-sm-2">
                <a href="javascript:" class="btn btn-default pull-right btn-xs br0" @click="remove_timeslot(k)"><i class="fa fa-remove"></i></a>
            </div>
        </div>

<template>

Vue.js 代码

Vue.component( 'settings', {
        template : '#settings',
        data : function () {
            return {
                s : {
                    timespans : [
                        {from : '', to : ''}
                    ]
                }
            }
        },
        methods : {
            add_timeslot : function () {
                Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''});
                $('.datepicker').datetimepicker();
            },
            remove_timeslot : function (k) {
                this.s.timespans.splice(k,1);
            },

        },

    });

Answer 1

试试这个，然后 DOM 将完成渲染，而不是在 nextTick 之前:

        add_timeslot : function () {
            Vue.set(this.s.timespans,this.s.timespans.length,{from:'',to:''});
            this.$nextTick(function () {
              $('.datepicker').datetimepicker();
            });
        },

当执行nextTick中的函数时，将渲染DOM元素。