javascript - 如何将 v-date-picker 与来自 vuetify 的范围道具一起使用

Question

我已经多次阅读有关 v-date-picker 的文档，我认为我想要使用的是这些功能之一，v-date-picker带有range道具。但我不知道为什么我似乎无法在我的项目中实现它。我发现了几个错误，例如：

1. [Vue warn]: Error in data(): "TypeError: dateString.split is not a function"我在这里读到了一些答案：using-new-date-with-v-date-picker-doesnt-work但它仍然不能解决我的问题
2. Error in render: "TypeError: dateString.trim is not a function"

这是我目前的进展：

有关我vuetify: "^1.5.16"用于我的项目的信息。这是我的代码示例：

<template>
 <div>
  <v-date-picker v-model="dates" range></v-date-picker>
  <v-text-field v-model="dateRangeText" label="Date range" prepend-icon="event" readonly></v-text-field>
  model: {{ dates }}
 <div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      loading: true,
      dates: ['2019-09-10', '2019-09-20']
    };
  },

  computed: {
    token() {
        return this.$store.state.auth.token;
    },
    dateRangeText () {
      return this.dates.join(' ~ ')
    },
  },
}
</script>

实际上我只是按照这里的步骤有人可以帮我解决这个问题吗？我对此v-date-picker与range道具问题感到困惑。

仅供参考，我已经尝试过了，但仍然失败：

1. 如何显示-a-fixed-vuetify-v-date-picker-range

我遵循这个答案，但这就是我得到的：

我将日期更改为：dates: [new Date('2019-09-10').toJSON(), new Date('2019-09-20').toJSON()],错误仍然存​​在。有人可以帮我解决这个问题吗？

标签： javascriptdatevue.jsvuetify.js