0

我正在尝试将我的框架整合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 : { }
    }) ;

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

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

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>

现在，我正在调用jqueryforfromDate和toDatein mounted()。日历现在可见，但是，当我调试vue（Inspect 元素，Chrome）时，我searchViewPojo没有显示更新的fromDate,toDate值。

我用了 ：https://stackoverflow.com/questions/45021907/vue-js-mounted

再次编辑 如果我从 Chrome Inspect Element->Vue 调试器修改 vue 对象，那么 fromDate 会更改。但是从 v-model 到 vue 对象的变化并没有反映出来。

4

0 回答 0