使用 vue-flatpickr-component 时，“Object(...) 不是函数”和“this.$refs.root 未定义”答案

【问题标题】："Object(...) is not a function" and "this.$refs.root is undefined" when using vue-flatpickr-component使用 vue-flatpickr-component 时，“Object(...) 不是函数”和“this.$refs.root 未定义”
【发布时间】：2021-04-09 02:32:19
【问题描述】：

我正在尝试在Vue类组件中使用Node包vue-flatpickr-component，带有以下vue模板代码：

<flat-pickr
    class="form-control"
    :config="flatpickr"
    v-model="form.data.date"
    :model-value="form.data.date"
    name="date"
/>

这是组件中相关的 TypeScript 代码：

@Component({
components: { 'flat-pickr': flatpickr },
})
export default class ClassComponent extends Vue {

    public form = {
        data: {
            date: '2021-01-01',
            // ...
        },
        // ...
    };

    public flatpickr = {
        wrap: true,
        altFormat: 'M j, Y',
        altInput: true,
        dateFormat: 'Y-m-d',
    };

    // ...
}

但是，我收到以下错误：

[Vue warn]: Error in render: "TypeError: Object(...) is not a function"

found in

---> <FlatPickr>
      <PriceChecker> at src/main/webapp/app/core/price-checker/price-checker.vue
        <App> at src/main/webapp/app/app.vue
          <Root>

和：

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.root is undefined"

found in

---> <FlatPickr>
       <PriceChecker> at src/main/webapp/app/core/price-checker/price-checker.vue
         <App> at src/main/webapp/app/app.vue
           <Root>

即使我从 <flat-picker> 元素中删除除 model-value 之外的所有属性，我也会遇到相同的错误。

这里可能出了什么问题，有人知道我该如何解决吗？

【问题讨论】：

标签： javascript typescript vue.js vue-component flatpickr

【解决方案1】：

当 Vue 2 项目使用适用于 Vue 3 项目的最新版本 vue-flatpickr-component (9.x) 时，会发生此错误。要使用 Vue 2 兼容版本的组件，请安装 8.x：

npm install -S vue-flatpickr-component@8

【讨论】：