Vue.js中使用Kendo UI组件出现未定义属性错误求助

AI 小北

2026-6-13

Vue3集成Kendo UI组件时出现未定义属性错误

错误详情

渲染DropdownList、DatePicker、Grid组件时触发以下TypeError：

Uncaught TypeError: Cannot read properties of undefined (reading 'caretAltDownIcon')（来自kendo-vue-dropdowns.js）
Uncaught TypeError: Cannot read properties of undefined (reading 'cloneDate')（来自kendo-vue-dateinputs.js）
Uncaught TypeError: Cannot read properties of undefined (reading 'tableKeyboardNavigationTools')（来自kendo-vue-grid.js）

复现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Timesheet Demo - Vue</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.0.3/default/default-main.css" />
    <script src="https://unpkg.com/vue@3.2.45"></script>
    <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-licensing"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-data-query@latest/dist/cdn/js/kendo-data-query.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-dropdowns@latest/dist/cdn/js/kendo-vue-dropdowns.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-dateinputs@latest/dist/cdn/js/kendo-vue-dateinputs.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css" />
  </head>

  <body>
    <div class="timesheet-wrapper vue-app" id="vueapp" v-show="!loading">
      <dropdownlist :data-items="['a', 'b']" :value="dropVal"></dropdownlist>
      <datepicker v-model="selectedDate" :min="getFirstDayOfMonth" :max="getLastDayOfMonth"></datepicker>
      <kendogrid :data-items="gridData" :columns="dataSourceColumns"></kendogrid>
    </div>

    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            gridData: [],
            selectedDate: null,
            dropVal: 'a',
            dataSourceColumns: [
              { field: 'TimesheetId', hidden: true },
              { field: 'RowId', hidden: true },
              { field: 'ContractTask.Description', title: 'Contract/Task', width: '200px' },
              { field: 'EntryDate', title: 'Date', width: '140px' },
              { field: 'Description', width: '640px' },
            ],
          };
        },
        computed: {
          getFirstDayOfMonth() {
            const date = new Date();
            return new Date(date.getFullYear(), date.getMonth(), 1);
          },
          getLastDayOfMonth() {
            const date = new Date();
            return new Date(date.getFullYear(), date.getMonth() + 1, 0);
          },
        },
      }).mount('#vueapp');
    </script>
  </body>
</html>

已尝试的排查操作

确认所有必要依赖库已加载
检查组件是否在Vue应用中正确注册
确保Vue响应式系统正常，数据已正确传递至组件
将Kendo Vue组件更新至最新版本，但错误仍未消除

解决方案

错误根源在于缺失必要依赖库、组件未注册、标签名错误、样式冲突，修正步骤如下：

补充缺失的依赖库
Kendo的Dropdowns需要图标库支持，DateInputs需要日期工具库，Grid需要导航工具库，需添加以下脚本：

<script src="https://unpkg.com/@progress/kendo-vue-icons@latest/dist/cdn/js/kendo-vue-icons.js"></script>
<script src="https://unpkg.com/@progress/kendo-vue-date-math@latest/dist/cdn/js/kendo-vue-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-vue-navigation@latest/dist/cdn/js/kendo-vue-navigation.js"></script>

全局注册Kendo组件
在Vue应用创建后，注册所需的Kendo组件：

const { DropdownList } = KendoVueDropdowns;
const { DatePicker } = KendoVueDateinputs;
const { Grid } = KendoVueGrid;
app.component('dropdown-list', DropdownList);
app.component('date-picker', DatePicker);
app.component('kendo-grid', Grid);

修正模板中的组件标签名
Vue组件需使用短横线分隔的命名（HTML不区分大小写），将模板中的标签改为：

<dropdown-list :data-items="['a', 'b']" :value="dropVal"></dropdown-list>
<date-picker v-model="selectedDate" :min="getFirstDayOfMonth" :max="getLastDayOfMonth"></date-picker>
<kendo-grid :data-items="gridData" :columns="dataSourceColumns"></kendo-grid>

统一Kendo样式文件
移除冲突的样式文件，只保留一套最新版本的Kendo主题样式：

<!-- 移除旧版本样式 -->
<!-- <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css" /> -->
<!-- 保留最新主题样式 -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.0.3/default/default-main.css" />

修正后的完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Timesheet Demo - Vue</title>

    <!-- 统一使用最新Kendo主题样式 -->
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.0.3/default/default-main.css" />
    <script src="https://unpkg.com/vue@3.2.45"></script>
    <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-licensing"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-data-query@latest/dist/cdn/js/kendo-data-query.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
    <!-- 补充缺失的依赖库 -->
    <script src="https://unpkg.com/@progress/kendo-vue-icons@latest/dist/cdn/js/kendo-vue-icons.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-date-math@latest/dist/cdn/js/kendo-vue-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-navigation@latest/dist/cdn/js/kendo-vue-navigation.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-dropdowns@latest/dist/cdn/js/kendo-vue-dropdowns.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-dateinputs@latest/dist/cdn/js/kendo-vue-dateinputs.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></script>
  </head>

  <body>
    <div class="timesheet-wrapper vue-app" id="vueapp">
      <!-- 修正组件标签名为短横线分隔格式 -->
      <dropdown-list :data-items="['a', 'b']" :value="dropVal"></dropdown-list>
      <date-picker v-model="selectedDate" :min="getFirstDayOfMonth" :max="getLastDayOfMonth"></date-picker>
      <kendo-grid :data-items="gridData" :columns="dataSourceColumns"></kendo-grid>
    </div>

    <script>
      const { createApp } = Vue;
      // 从Kendo模块中取出组件
      const { DropdownList } = KendoVueDropdowns;
      const { DatePicker } = KendoVueDateinputs;
      const { Grid } = KendoVueGrid;

      const app = createApp({
        data() {
          return {
            gridData: [],
            selectedDate: null,
            dropVal: 'a',
            dataSourceColumns: [
              { field: 'TimesheetId', hidden: true },
              { field: 'RowId', hidden: true },
              { field: 'ContractTask.Description', title: 'Contract/Task', width: '200px' },
              { field: 'EntryDate', title: 'Date', width: '140px' },
              { field: 'Description', width: '640px' },
            ],
          };
        },
        computed: {
          getFirstDayOfMonth() {
            const date = new Date();
            return new Date(date.getFullYear(), date.getMonth(), 1);
          },
          getLastDayOfMonth() {
            const date = new Date();
            return new Date(date.getFullYear(), date.getMonth() + 1, 0);
          },
        },
      });

      // 全局注册Kendo组件
      app.component('dropdown-list', DropdownList);
      app.component('date-picker', DatePicker);
      app.component('kendo-grid', Grid);

      app.mount('#vueapp');
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者RA Hat

Vue.js中使用Kendo UI组件出现未定义属性错误求助

错误详情 #

复现代码 #

已尝试的排查操作 #

解决方案 #

修正后的完整代码 #

错误详情

复现代码

已尝试的排查操作

解决方案

修正后的完整代码