时间戳

首页 > 解决方案 > 使用 PrimeVue 的日历组件会给出“执行渲染功能期间出现未处理的错误”Vue 3

vue.js - 使用 PrimeVue 的日历组件会给出“执行渲染功能期间出现未处理的错误”Vue 3

问题描述

使用 VuePrime（版本 ^3.5.0）提供的日历组件时出现错误。当我单击将显示日历本身的输入时发生错误。

Vue（版本 3）给出的错误如下： 在此处输入图像描述

当我单击将触发事件以显示日历 UI 元素的输入元素时，将引发此错误。当我在同一个输入元素之外单击时也会引发错误，所以我认为这与显示/隐藏日历的元素有关。

这是由日历组件呈现的输入元素，一旦单击它就会实际打开日历 UI，因此我可以选择日期等：

在此处输入图像描述

我不知道这是 Vue 的问题还是 Prime 的问题。

这是使用日历组件的组件的代码。我正在使用选项 API。

<template>
  <div class="flow-content">
    <h1 class="a-component-title">
      Formulario para registrar evento
    </h1>
    <form @click.prevent>
         <!-- Fields para datos del Evento -->
         <div class="flow-content  p-mt-3">
            <h2 class="form-title p-text-bold">Datos del evento</h2>
            <div class="p-fluid p-formgrid p-grid">
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoTipo">Tipo/s</label>
                    <MultiSelect    v-model="evento.seleccionadosTipo" 
                                    :options="evento.tipos"
                                    optionLabel="name"
                                    placeholder="Selecciona el tipo"
                                    id="eventoTipo"
                                    display="chip"
                                    :showToggleAll="false"
                                    :filter="true"/>
                </div>
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoUbicacion">Ubicación</label>
                    <InputText id="eventoUbicacion" type="text" />
                </div>
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoFecha">Fecha</label>
                    <!--HERE IS THE CALENDAR-->
                    <Calendar v-model="evento.dateCalendar"/>
                </div>
            </div>
         </div>
        
    </form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            denunciante: {
                esAnonimo: false
            },
            evento: {
                seleccionadosTipo: null,
                tipos: [
                    {name: 'Ciudado Inresponsable', id: 450},
                    {name: 'Perra Preñada', id: 55},
                    {name: 'Moquillo', id: 15},
                    {name: 'Perro en vía pública', id: 789}
                ],
                dateCalendar: null
            }
            
        }
    }
}
</script>

顺便说一下，这是我当前项目的依赖项列表及其版本：

"dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.19",
    "@vuelidate/validators": "^2.0.0-alpha.16",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.5.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.4.1"
  }

标签： vue.jsprimevue

解决方案

我通过在 VuePrime 的全局配置中定义 Locale 值解决了这个问题。Calendar 组件似乎抛出了一个 TypeError ，因为它找不到代表每个月的语言环境文本。

只需在.use函数上添加第二个参数：

app.use(PrimeVue, {
    locale: {
       dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
       dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
       monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
       monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
       today: 'Today',
       weekHeader: 'Wk',
       firstDayOfWeek: 0,
       dateFormat: 'mm/dd/yy',
 }
});

我建议您包含 VuePrime 提供的所有语言环境选项，但对于日历组件来说，这就足够了。

有关区域设置的更多信息： https ://www.primefaces.org/primevue/showcase/#/locale

推荐阅读