Question

我创建了datepicker vuejs组件。

我在页面中设置了两个日期选择器以选择开始日期和结束日期。所以一个datepicker的startDate和endDate取决于另一个的值。所以，为此，我需要在所选值上设置观察者。

使用this.$emit('input', value)在VueJS（＆lt; 2.3.0）上工作正常。但在VueJS（2.4.4）中，它无效。

我在前端开发方面很差劲。所以即使在vuejs上度过了两天之后我也什么都没有。我刚才知道这只是因为vue版本＆gt; 2.2.6。

如果有人知道这个解决方案，那对我来说非常有帮助。

这是我的代码。

DatePicker.vue

<template>
    <div class="input-append date form_datetime">
        <input size="16" type="text" readonly>
        <span class="add-on"><i class="icon-th fa fa-calendar"></i></span>
    </div>
</template>

<script>
    export default {
        twoWay: true,
        props: ['slctd', 'startDate', 'endDate'],
        mounted: function () {
            var self = this;
            $(this.$el).datetimepicker({
                format: "mm/dd/yyyy",
                autoclose: true,
                minView: 2,
                maxView: 3,
                daysShort: true,
                initialDate: this.slctd,
                startDate: this.startDate,
                endDate: this.endDate,
            }).on('changeDate', function (ev) {
                var value = new Date(ev.date.valueOf()).toString('MM/dd/yyyy');
                self.$emit('input', value);
            });
        },
        watch: {
            slctd: function (value) {
                console.log('watch:value ' + value);
                $(this.$el).find("input").val(value);
            },
            startDate: function (value) {
                console.log('watch:start ' + value);
                $(this.$el).datetimepicker('setStartDate', value);
            },
            endDate: function (value) {
                console.log('watch:end ' + value);
                $(this.$el).datetimepicker('setEndDate', value);
            }
        },
    }
</script>

JS

window.Vue = require('vue');
Vue.component('component-date-picker', require('./components/DatePicker.vue'));
window.app = new Vue({
    el: '#app',
    data: {
        queries: {
            start_date: '10/04/2017',
            end_date: '10/05/2017',
        }
    },
});

HTML

<component-date-picker v-bind:end-date="queries.end_date" v-bind:slctd="queries.start_date" v-model="queries.start_date"></component-date-picker>
<component-date-picker v-bind:start-date="queries.start_date" v-bind:slctd="queries.end_date" v-model="queries.end_date"></component-date-picker>

VueJS - 2.2.6（工作）
VueJS - 2.4.4（不工作）

我也试过这个。但没有成功

HTML

<component-date-picker v-bind:end-date="queries.end_date" v-bind:slctd="queries.start_date" v-model="queries.start_date" v-on:input="set_start_date"></component-date-picker>
<component-date-picker v-bind:start-date="queries.start_date" v-bind:slctd="queries.end_date" v-model="queries.end_date" v-on:input="set_end_date"></component-date-picker>

JS

methods: {
    set_start_date: function(value){
        console.log('called');
        this.queries.start_date = value;
    },
    set_end_date: function(value){
        this.queries.end_date = value;
    },
}

在这段代码中，调用了我的方法，我在控制台中被“调用”了。但组件的观察者不工作。它应该起作用，因为在这些方法中更改了startDate / endDate。我不知道VueJS 2.4.4的新工作概念是什么。

解决

由于缺乏前端知识，这是我的愚蠢错误。我在vue根实例的create方法中重新创建查询对象。在之前的代码中，create中没有任何内容，因此它工作正常。

这是我的错误

JS

created: function () {
    /* my mistake starts */
    this.queries = queryString.parse(location.search, {arrayFormat: 'bracket'});
    /* my mistake ends */
    this.queries.start_date = (this.queries.start_date) ? this.queries.start_date : null;
    this.queries.end_date = (this.queries.end_date) ? this.queries.end_date : null;
},

在vuejs组件的道具上设置观察者

0 个答案: