Vue Object does not allow datepicker Calendar to pop up

Question

And I am trying to integrate my vue.js into the framework and facing some peculiar issues.

I have the following 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>

I am then initialising datepickers (from the SmartAdmin theme) and the Vue object

$("#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 : { }
    }) ;

The datepicker calendar pops up correctly if I comment the var vueApp = new Vue({}) ; lines. The datepicker calendar does not popup after I initialise the vue object.

I wonder, is there a compatibility issue between the vue framework and this theme ?

var vueApp, not commented

var vueApp, commented

EDIT

<!-- 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>

Now, I am calling the jquery for fromDate and toDate in the mounted(). The calendar is now visible, But, when I debug the vue (Inspect element, Chrome) my searchViewPojo is not showing the updated fromDate, toDate values.

I used : https://stackoverflow.com/questions/45021907/vue-js-mounted

Edit Again If I modify the vue object from the Chrome Inspect Element->Vue debugger, then then fromDate changes. But changes from the v-model to the vue object dont reflect.

Put your jQuery logic into the `mounted()` hook, in VueJS instance. — Belmin Bedak, Feb 12 '18 at 08:56
Actually i lost the vue feature. Now when I change the `fromDate`, the `searchViewPojo.startDate` does not change — Siddharth, Feb 12 '18 at 09:24
I have edited the question, is there anything I can provide you ? — Siddharth, Feb 12 '18 at 09:52
Where have you declared `searchPojo` property (talking about Vue) ? — Belmin Bedak, Feb 12 '18 at 10:34
Modified the code to reflect the initialization of vue object — Siddharth, Feb 12 '18 at 15:12
You should take look at Vue Docs section "Reactivity in depth", and you will see that If you want to make properties reactive, you have to declare them in data object, in Vue instance.I see `data` passed in `vueAjax` but it's not referenced anywhere. — Belmin Bedak, Feb 12 '18 at 15:40

Vue Object does not allow datepicker Calendar to pop up

0 Answers0