Question

jQuery日期选择器包含在Vue组件中。该组件会发出用于更新应用模型的更新消息。

该应用有两个日期选择器输入字段：

startDate
adjustmentDate

修改startDate后，adjustmentDate将更新为下个月的第一个或第十五个月。但是，adjustmentDate datepicker组件未收到更新通知。

预期行为：

startDate datepicker onSelect触发由Vue方法emit

updateStartDate

方法updateStartDate设置模型属性adjustmentDate

希望这会触发adjustmentDate组件更新，因为adjustmentDate模型属性绑定到有监视的datepicker componentDate属性。

但是更改模型没有通知组件的影响。

有关如何正确执行此操作并在adjustmentDate发生更改时显示新计算的startDate的任何建议吗？

演示代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

</head>


<body>

    <div id="app">

        <div><label>Start date</label></div>
        <div>
            <date-picker 
                v-model="startDate"
                v-bind:component-date="startDate"
                date-format="yy-mm-dd"
                @update-date="updateStartDate"
                v-once
            ></date-picker>
        </div>

        <div><label>Adjustment date</label></div>
        <div>
            <date-picker
                v-model="adjustmentDate"
                v-bind:component-date="adjustmentDate"
                date-format="yy-mm-dd"
                @update-date="updateAdjustmentDate"
                v-once
            ></date-picker>
        </div>

    </div>



    <script>

    Vue.component('date-picker', {

        props: ['dateFormat', 'componentDate'],

        template: '<input/>',


        mounted: function() {

        var self = this;

        var _convertDateStringToDate = function(dateString) {
                var dateParts = dateString.split("-");
                var year = dateParts[0];
                var month = dateParts[1];
                var dayOfMonth = dateParts[2];
                return new Date(year, month, dayOfMonth);
        };


        $(this.$el).datepicker({

                dateFormat: this.dateFormat,

                onSelect: function(date) {
                        self.$emit('update-date', _convertDateStringToDate(date));
                },

                onClose: function(date) {
                        self.$emit('update-date', _convertDateStringToDate(date));
                }

        });

        $(this.$el).datepicker('setDate', this.componentDate);

        },


        watch: {
            componentDate: function(newValue, oldValue) {
                $(this.$el).datepicker('setDate', this.componentDate);
            }
        },


        beforeDestroy: function() {
            $(this.$el).datepicker('hide').datepicker('destroy');
        }

    });



    var _calculateAdjustmentDate = function(date) {

        var year = date.getFullYear();
        var month = date.getMonth();
        var dayOfMonth = date.getDate();

        if (dayOfMonth > 15) {
            month = month + 1;
            dayOfMonth = 1;
        } else if (dayOfMonth > 1 && dayOfMonth < 15) {
            dayOfMonth = 15;
        }

        return new Date(year, month, dayOfMonth);

    };


    var data = function() {

        var now = new Date();

        return {
                startDate: now,
                adjustmentDate: _calculateAdjustmentDate(now),
        };

    };


    new Vue({

        el: '#app',

        data: data,

        methods: {

                updateStartDate: function(date) {
                        this.startDate = date;
                        this.adjustmentDate = _calculateAdjustmentDate(date);
                },

                updateAdjustmentDate: function(date) {
                        this.adjustmentDate = date;
                },

        }

    });


    </script>


</body>


</html>

Answer 1

您需要从调整日期组件中删除v-once指令，因为它会阻止数据更改时重新呈现。

此外，您只需将_calculateAdjustmentDate放入计算属性即可，请参阅Computed Properties。

在此处查看您的更新示例：https://codepen.io/anon/pen/VQYarZ

您的代码还存在其他一些问题，我建议您查看Vue guide，尤其是方法事件处理程序和计算属性以及深度反应性。

此外，_calculateAdjustmentDate并没有真正按照您的描述进行操作，因此您也可以对此进行调查。您可以考虑Moment.js

Vue数据模型更改未反映在绑定组件

1 个答案: