如何在 vuetify 3 labs 日期选择器中设置当前日期输入值？

Question

在 vuetify 3.3.11 版本中，我创建了一个日期选择器组件，如文档中所述。但是当我想将当前表单中的日期值设置为默认值时，出现以下错误。

[Vue warn]：组件中超出最大递归更新数 。这意味着你有一个反应效应，正在改变它的 自己的依赖关系，从而递归地触发自身。可能的 来源包括组件模板、渲染函数、更新的钩子或 观察源功能。

这是我的代码。

src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import * as labs from "vuetify/labs/components";
// Translations provided by Vuetify
import { en, tr } from "vuetify/locale";

// Composables
import { createVuetify } from 'vuetify'

import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import trTr from 'date-fns/locale/tr'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  components: {
    ...labs,
  },
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      tr: trTr,
    },
  },
  locale: {
    locale: "tr",
    fallback: "en",
    messages: { tr, en },
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1867C0',
          secondary: '#5CBBF6',
        },
      },
    },
  },
})

/src/component/DateInput.vue

<template>
  <div>
    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      :nudge-right="40"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ props }">
        <v-text-field
          v-bind="props"
          :modelValue="dateFormatted"
          variant="outlined"
          append-inner-icon="mdi-calendar"
        ></v-text-field>
      </template>
      <v-locale-provider locale="tr">
        <v-date-picker
          color="primary"
          :modelValue="getDate"
          @update:modelValue="updateDate"
        ></v-date-picker>
      </v-locale-provider>
    </v-menu>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * Date on ISO format to be edited.
     * @model
     */
    value: {
      type: String,
      default() {
        return "2023-10-10"
      },
    },
  },
  watch: {
    value: {
      handler(val) {
        this.input = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      menu: false,
      input: null,
    };
  },
  computed: {
    dateFormatted() {
      const date = this.input ? new Date(this.input) : new Date();
      let month = 1 + date.getMonth();
      if (month < 10) {
        month = `0${month}`;
      }
      let day = date.getDate();
      if (day < 10) {
        day = `0${day}`;
      }
      return `${date.getFullYear()}-${month}-${day}`;
    },
    getDate() {
      /**
       * Return ISO 8601
       */
      let date = this.input ? new Date(this.input) : new Date();
      return date;
    },
  },
  methods: {
    updateDate(val) {
      // this.menu = false;
      this.input = val
      console.error(val)
    },
  },
};
</script>

/src/App.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="6">
        <date-input></date-input>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import DateInput from './components/DateInput.vue';

export default {
  components: {
    DateInput,
  }
}
</script>

此外，更新模型运行时会出现无限循环。

这是您可以看到的codesandbox url。 https://codesandbox.io/p/github/eguvenc/test/main

这是您可以测试的存储库。 https://github.com/eguvenc/test

Answer 1

vuetify 日期选择器在 3.3.9 - 10 - 12 版本中存在递归更新错误。

Vuetify 版本：3.3.9 Vue版本：3.3.4 浏览器：Chrome 114.0.0.0 操作系统：Windows 10

这是错误链接。

https://github.com/vuetifyjs/vuetify/issues/17872

2023年8月9日星期三发布了新版本。我安装了新版本，一切正常。看来已经确定了。