Question

我在使用Vue.JS的项目中使用Bootstrap DateTimePicker。这通常工作正常，但我最近遇到了一个我从未遇到过的问题，让我感到困惑。

在页面加载时，有两个DateTime-Picker，两者都有效。见this partial screenshot。但是，在页面的下方，有一些按钮可以调用一个新的Vue.JS模态（单击该按钮实际上会调用$('#modal-xxx').modal('show');。

将这些DateTime-Picker放置在该模态中使它们无法正常工作。实际样式仍然加载 - 但它们不会触发。我认为这是因为这些问题的JavaScript卡在两个状态之间;

a）当模态出现时调用它的状态，据我所知，它将永远不会工作 - 因为浏览器只解释页面加载时需要的内容，然后停止。

b）加载页面加载，这可能也不会起作用，因为此时元素不可见。

我已尽力解决这个问题 - 但无论调用这些DateTimePickers的javascript是放在模态本身 - 还是放在页面底部 - 它仍然会使元素无效。

我已附上以下示例代码库：

<div class="form-group" :class="{'has-error': updateExampleForm.errors.has('example')}">
    <label class="col-md-4 control-label">Example</label>

    <div class='col-md-6'>
        <div class='input-group date' id='update_example'>
            <input type='text' class="form-control" v-model="updateExampleForm.example" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <script type="text/javascript">
            $( document ).ready(function() {
                $('#update_example').datetimepicker();
            });
        </script>
        <span class="help-block" v-show="updateExampleForm.errors.has('example')">
            @{{ updateExampleForm.errors.get('example') }}
        </span>
    </div>
</div>

任何人都可以确认为什么这不会触发预期的结果（正在形成工作） - 如果是这样，那么这样做的替代方法是什么？如果您能够详细说明您提出的任何替代方法背后的想法 - 非常感谢！

Answer 1

解决这个问题的方法是在显示模态的函数中执行此操作：

    editExample(example) {
        $('#modal-update-example').modal('show');
        this.$nextTick(function(){
            $('#update_example_1').datetimepicker();
            $('#update_example_2').datetimepicker();
        });
    }

这等待其他操作完成，然后在元素上实例化日期时间选择器。

在未显示的模式中加载/准备jQuery

1 个答案: