VueJs 使用日期（打字稿）和 v-model答案

【问题标题】：VueJs working with date (typescript) and v-modelVueJs 使用日期（打字稿）和 v-model
【发布时间】：2020-01-19 04:43:47
【问题描述】：

在我的项目中，我有以下 VueJs-Typescript 组件：

<template>
    <form>
        <input type="text" v-model="myModel.myDate" />
    </form>
</template>
<script lang="ts">
     import { Component, Vue, Prop } from 'vue-property-decorator';

    @Component
    export default class MyComponent extends Vue {
        public myModel : Model = new Model();
        //myModel.myDate is of type Date
    }
</script>

现在的问题是，v-model 显然无法动态绑定值。有人可以告诉我如何解决渲染问题吗？目标是在前端将日期呈现为字符串（用于输入字段），向后呈现为日期（用于对象）。

【问题讨论】：

标签： typescript vue.js v-model

【解决方案1】：

好的，我想我找到了一个可行的解决方案...，不确定它是否能解决所有问题..

<template>
    <form>
         <input type="text" 
                 :value="myModel.myDate | datetime('Q.YYYY')" 
                 @blur="myModel.myDate = parseDate($event, 'Q.YYYY', myModel.myDate);"
                 pattern="^([1-4].[1-9][0-9][0-9][0-9])" />
    </form>
</template>
<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';
    import moment from 'moment';

    @Component
    export default class MyComponent extends Vue {
        public myModel : Model = new Model();
        //myModel.myDate is of type Date

        parseDate(event:any, format: string, field : any) : Date |undefined {
            field = moment(event.target.value, format).toDate();
            this.$forceUpdate();
            if (field == "Invalid Date") {
                return undefined;
            }
            return moment(event.target.value, format).toDate();
        }
    }
</script>

然后我设置了以下过滤器：

Vue.filter('datetime', function (date: Date, format: string = "DD.MM.YYYY") {
    if (!date) {
        return undefined;
    }
    if (!moment.isDate(date)) {
        return undefined;
    }
    var parsedDate = moment(date);
    var stringDate: string | undefined = parsedDate.format(format);
    if (!stringDate) {
        stringDate = "";
    }
    return stringDate;
});

【讨论】：

【解决方案2】：

您可以添加一个计算属性，该属性会为您返回过滤后的日期。 V-bind 到计算属性，这也将解决初始化问题。

Typescript 和 Vue 中的计算属性非常简单，只需在函数名称之前输入 get 即可

    // this is a computed property
    get totalRows() {
        return this.SearchResultItems.length;
    }

【讨论】：

【解决方案3】：

尝试如下所示初始化它，希望它会工作。

<template>
    <form>
        <input type="text" v-model="myModel.myDate" />
        {{myModel.myDate}}
    </form>
</template>    

<script lang="ts">
         import { Component, Vue, Prop } from 'vue-property-decorator';

        @Component
        export default class MyComponent extends Vue {
            public myModel =  {
               myDate : new Date()
            }
           created() {
              console.log(this.myModel.myDate)
           }
        }
    </script>

【讨论】：