Vue Object не позволяет всплывающему календарю всплывающего окна

И я пытаюсь интегрировать мой vue.js в рамки и сталкиваются с некоторыми специфическими проблемами.

У меня есть следующий HTML

<div class="row" id="searchDetailsDiv">
      <div class="col-sm-6">
       <div class="form-group">
        <div class="input-group">
            <input class="form-control" id="fromDate"
            v-model="searchViewPojo.fromDate" type="text"
            placeholder="From">
            <span class="input-group-addon"><i
            class="fa fa-calendar"></i></span>
        </div>
       </div>
        </div>
    <div class="col-sm-6">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="toDate"
                    v-model="searchViewPojo.toDate" type="text"
                    placeholder="To">
                <span class="input-group-addon"><i
                    class="fa fa-calendar"></i></span>
            </div>
        </div>
    </div>
</div>

Затем я инициализирую указатели даты (из темы SmartAdmin) и объект Vue.

$("#fromDate").datepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "maxDate", selectedDate);
    }

});
$("#toDate").datepicker({
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "minDate", selectedDate);
    }
});


var vueApp = new Vue({
    el : searchDetailsDiv,
    methods : { }
    }) ;

Календарь DatePicker всплывает правильно, если я комментирую var vueApp = new Vue({}) ; линий. Календарь выбора даты не появляется после инициализации объекта vue.

Интересно, есть ли проблема совместимости между Vue Framework и этой темой?

var vueApp, без комментариев

var vueApp, без комментариев

var vueApp, прокомментировал

var vueApp, прокомментировал

РЕДАКТИРОВАТЬ

<!-- My Main Page -->

<!-- the spring controller sends a JSTL object searchViewPojo --> 
<script>
var searchViewPojo = JSON.stringify(${searchViewPojo});
searchViewPojo = JSON.parse(searchViewPojo) ;
</script>

<body>
<div>
    <!-- entire view -->
</div>
</body>
<script>

var data;
    try {
        data = {
            searchViewPojo : searchViewPojo,
            domainOrGroupParentsInSelectedClient : []
        }
    } catch (err) {

    }
var vueWrapper = vueAjax(data, callWithinMounted); 

function vueAjax(data, callWithinMounted) {
     var vueApp = new Vue({
        el : searchDetailsDiv,
        methods : { }
        },
        mounted() {
            callWithinMounted() ;
        }) ;
    return vuewApp ;
}


function callWithinMounted() {
        /*
        +------------------------------------------------------------+
        | DATE RANGE PICKER SCRIPT                                  |
        +------------------------------------------------------------+
         */
        $("#fromDate").datepicker({
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',
            onClose: function (selectedDate) {
                $("#to").datepicker("option", "maxDate", selectedDate);
            }

        });
        $("#toDate").datepicker({
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',
            onClose: function (selectedDate) {
                $("#from").datepicker("option", "minDate", selectedDate);
            }
        });
}
</script>

Теперь я звоню jquery за fromDate а также toDate в mounted(), Календарь теперь виден, но, когда я отлаживаю vue (Проверить элемент, Chrome) мой searchViewPojo не отображается обновленное fromDate, toDate ценности.

Я использовал: https://stackru.com/questions/45021907/vue-js-mounted

Повторное редактирование Если я изменю объект vue из отладчика Chrome Inspect Element->Vue, то изменится fromDate. Но изменения от v-модели до объекта vue не отражаются.

Источник

0 ответов

Другие вопросы по тегам