使用 vue-flatpickr-component 时,“Object(...) 不是函数”和“this.$refs.root 未定义”
Posted
技术标签:
【中文标题】使用 vue-flatpickr-component 时,“Object(...) 不是函数”和“this.$refs.root 未定义”【英文标题】:"Object(...) is not a function" and "this.$refs.root is undefined" when using vue-flatpickr-component 【发布时间】: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
之外的所有属性,我也会遇到相同的错误。
这里可能出了什么问题,有人知道我该如何解决吗?
【问题讨论】:
【参考方案1】:当 Vue 2 项目使用适用于 Vue 3 项目的最新版本 vue-flatpickr-component
(9.x) 时,会发生此错误。要使用 Vue 2 兼容版本的组件,请安装 8.x:
npm install -S vue-flatpickr-component@8
【讨论】:
以上是关于使用 vue-flatpickr-component 时,“Object(...) 不是函数”和“this.$refs.root 未定义”的主要内容,如果未能解决你的问题,请参考以下文章
在使用加载数据流步骤的猪中,使用(使用 PigStorage)和不使用它有啥区别?
Qt静态编译时使用OpenSSL有三种方式(不使用,动态使用,静态使用,默认是动态使用)