时间戳

首页 > 解决方案 > 我试图在 v-bind:max 中使用变量设置默认值

vue.js - 我试图在 v-bind:max 中使用变量设置默认值

问题描述

嗨，我有一个日期输入，我想添加一个 max 属性，因为我想允许用户可以选择该日期下的日期，所以我有我的 html 代码：

<div class="form-group">
    <label for="exampleInputEmail1">Fecha de Recaudación</label>
    <input type="date"
       class="form-control" 
       id="exampleInputEmail1"
       v-bind:max="datePickerOptions"
       v-model="form.collection_date" 
       placeholder="Ingresa la fecha de la recaudación" 
       required>
</div>

我的 VueJs 代码：

export default {
    created() {
        this.getBranchOfficeList();
        this.getDate();
    },
    methods: {
        getDate() {
            var d = new Date();
            d.setDate(d.getDate()-5);
            const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
            const mo = new Intl.DateTimeFormat('en', { month: 'numeric' }).format(d);
            const da = new Intl.DateTimeFormat('en', { day: 'numeric' }).format(d);

            if(ye < 10) {
                var new_year = '0' + ye;
            } else {
                var new_year = ye;
            }
            if(mo < 10) {
                var new_month = '0' + mo;
            } else {
                var new_month = mo;
            }
            if(da < 10) {
                var new_day = '0' + da;
            } else {
                var new_day = da;
            }
            this.date_picker = new_year +'-'+ new_month + '-' + new_day;
        }
    },
    data: function() {
        return {
            datePickerOptions: this.date_picker
        }
    },
    computed: {
        isDisabled() {
            return true;
        }
    }
}

你怎么能看到 datePickerOptions 有一个来自 this.date_picker 的值，它来自方法 getDate() 但它不起作用，为什么？

谢谢。

标签： vue.js

解决方案

您可以使用计算属性，而不是将其作为方法。还要删除方法 getDate() 因为名称是保留的函数名称

 datan() {
        return {
            date_picker: null,
            form: {        // I have defined the form object here since you are using it in the v-model
               .....
            }
        }
    },
computed: {
    isDisabled() {
            return true;
        },
    computeMaxDate() {
            var d = new Date();
            d.setDate(d.getDate()-5);
            const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
            const mo = new Intl.DateTimeFormat('en', { month: 'numeric' }).format(d);
            const da = new Intl.DateTimeFormat('en', { day: 'numeric' }).format(d);

            if(ye < 10) {
                var new_year = '0' + ye;
            } else {
                var new_year = ye;
            }
            if(mo < 10) {
                var new_month = '0' + mo;
            } else {
                var new_month = mo;
            }
            if(da < 10) {
                var new_day = '0' + da;
            } else {
                var new_day = da;
            }
            this.date_picker = new_year +'-'+ new_month + '-' + new_day;
            return this.date_picker;
        }
}

修改后的模板块是

<div class="form-group">
    <label for="exampleInputEmail1">Fecha de Recaudación</label>
    <input type="date"
       class="form-control" 
       id="exampleInputEmail1"
       :max="computeMaxDate"
       v-model="form.collection_date" 
       placeholder="Ingresa la fecha de la recaudación" 
       required>
</div>

在计算属性中，我刚刚复制粘贴了您的逻辑......所以您需要确保存储在“date_picker”中的值具有以下格式：

YYYY-MM-DD // eg: 2021-01-19

如果它不是上述格式，那么您需要调试并修复它

推荐阅读