【问题标题】:How to get past month date using Javascript inside VueJs?如何在 VueJs 中使用 Javascript 获取过去的月份日期?
【发布时间】:2019-10-05 11:31:38
【问题描述】:

我对 Vue 有点陌生,想知道如何获取过去一个月的日期:我有这个代码:

import SomeTable from "./table/SomeTable";

export default {
    name: "Cabinets",
    components: {SomeTable},
    data() {
        return {
            defaultColumns: [
                'id',
                'serialNumber'
            ],

            defaultStartDate: new Date(),
            defaultEndDate: new Date('2019-10-07')
        }
    },
    props: {
        startDate: {type: Date, required: false},
        endDate: {type: Date, required: false},
    }
}

</script>

然后我将defaultStartDatedefaultEndDate 放入SomeTable 元素中,如下所示:

 <some-table :start-date="defaultStartDate" :end-date="defaultEndDate" :default-columns="defaultColumns"></some-table>

然后返回正确的今天的开始日期以及设置的日期。但是当我尝试做这样的事情时:

defaultEndDate: new Date().getFullYear() + '-' + new Date().getMonth() + '-' + new Date().getDate()

我的本​​地环境变成空白并出现各种错误。我认为这是因为我不能在 Vue 的那个地方使用 Javascript?但同样,我真的不确定 Vue 是如何工作的,并且通过谷歌搜索找不到太多关于它的信息。那么我怎么能使用 Javascript 来做到这一点,或者即使 Vue 有一个巧妙的技巧呢?

编辑: 我得到的错误是:

data() 中的错误:“TypeError: Date().getFullYear 不是函数”

但是我在 Vue 中使用的所有 javascript 函数。还有

无效的道具:道具“endDate”的类型检查失败。预期日期,得到值为“2019-9-5”的字符串。

【问题讨论】:

  • “得到各种各样的错误” ...它们是什么?错误消息非常重要且信息丰富,并且还向您显示代码中的问题所在。将它们包含在您的问题中
  • @charlietfl 你是对的,但它们没有意义,因为它们是矛盾的,其中一个说这些函数是 undefiend 的,另一个说他们有一个字符串。所以我认为它们没有用。
  • 它们可能会让您感到困惑,但完全忽略它们并不是解决问题的方法。实际上,您似乎误解了它们的含义

标签: javascript vue.js


【解决方案1】:

在您的代码中,endDate: {type: Date, required: false}, 表示 endDate 应为 Date 类型。

因此您需要将计算值转换为Date,如下所示:

defaultEndDate: new Date(`${(new Date()).getFullYear()}-${(new Date()).getMonth()}-${(new Date()).getDate()}`)

编辑: 您需要考虑月份是一月(0)。使用上面的方法,一月份的时候会报错。 我认为使用computed 值可能会更好,如下所示;

computed: {
  defaultEndDate() {
     const now = new Date();
     now.setMonth(now.getMonth() - 1);
     return new Date(now.toJSON().slice(0, 10));
  }
}

【讨论】:

  • 这很有意义,而且效果很好,谢谢。但由于我想要过去一个月,所以不需要 +1,因为 Javascript 默认返回过去一个月。
  • 感谢您回到这里
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-29
  • 2014-10-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-16
  • 2018-11-28
相关资源
最近更新 更多