Question

我正在尝试将我的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>

然后我初始化datepickers（来自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 : { }
    }) ;

如果我评论var vueApp = new Vue({}) ;行，则会正确弹出日期选择器日历。初始化vue对象后，不会弹出datepicker日历。

我想知道，vue框架和这个主题之间是否存在兼容性问题？

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（ Inspect元素，Chrome ）时，我的searchViewPojo未显示更新的fromDate，{{1值。

我用过：toDate

再次编辑 如果我从Chrome Inspect Element-＆gt; Vue调试器修改vue对象，则fromDate更改。但是从v模型到vue对象的变化并没有反映出来。

Vue对象不允许弹出datepicker日历

0 个答案: