Javascript 如何将FlatPicker与vue组件一起使用？

免责声明：我是vue.js的新手

我需要帮助，让一个日期选择器与我的模态组件工作。我已经做了模态，工人们都很好，我还安装了一个日期选择器（“FlatPicker”），当我在组件之外的元素上调用它时，它工作得很好

import flatpickr from 'flatpickr'

然而，当我尝试在模态上使用它时，什么都没有发生。我不确定我应该在哪里调用组件中的日期选择器，因为我认为你应该避免放置任何有副作用的东西，因为它们不会被解析

我不确定应该在哪里包括flatpickr脚本，它应该在模板中还是应该在我的主app.js中

My modal component.vue

<template>
<div class="cis-modal is-active">
 <div class="cis-modal-background">
    <div class="cis-modal-content animated bounceInUp">
        <div class="card">
            <div class="card-body">

                <slot></slot>

            </div>
        </div>
    </div>
    <button class="cis-modal-close" @click="$emit('closed')"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
</div>

<script>
 export default {
 }
</script>

导出默认值{
}

FlatPicker脚本

<script>
 $("#talentDOB").flatpickr({
 enableTime: true,
 dateFormat: "F, d Y H:i"
});

美元（“#talentDOB”）.flatpicker({
启用时间：对，
日期格式：“F，d Y H:i”
});

被调用的模态

<modal v-if="showEditTalentModal" @closed="showEditTalentModal = false;">
{!! Form::model($talent, ['method' => 'PATCH', 'action' =>     ['TalentController@update', $talent->user_id], 'files'=>true ]) !!}

<div class="form-group">
  {!! Form::label('dob', 'Date of Birth:') !!}
  {!! Form::text('dob', null, [ 'data-input','class'=>'form-control',  'required' => 'required', 'id' => 'talentDOB']) !!}
</div>

<div class="form-group">
 {!! Form::submit('Update Profile', ['class'=>'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</modal>

{！！Form:：model（$talent，['method'=>'PATCH'，'action'=>['TalentController@update“，$talent->user_id]，'files'=>true]）
{！！Form:：label（'dob'，'出生日期：'）
{！！Form:：text（'dob'，null，['data input'，'class'=>'Form-control'，'required'=>'required'，'id'=>'talentDOB']）
{！！表单：：提交（'Update Profile'，['class'=>'btn btn primary']）
{！！Form:：close（）！！}

---

感谢您的帮助。

首先，导入组件

import flatpickr from 'flatpickr'

然后在mounted中创建flatpicker实例

flatpickr('#datepicker')

当然，您需要具有相同id的输入

<input type="text" id="datepicker" v-model="dateValue" autocomplete="off"/>

---

实际上，在Vue中使用它没有任何特殊要求。

首先，导入组件

import flatpickr from 'flatpickr'

然后在mounted中创建flatpicker实例

flatpickr('#datepicker')

当然，您需要具有相同id的输入

<input type="text" id="datepicker" v-model="dateValue" autocomplete="off"/>

---

实际上，在Vue中使用它没有任何特殊要求。

我还必须手动加载css才能使其工作

require（“flatpickr/dist/flatpickr.css”）

我还必须手动加载css才能使其工作

require（“flatpickr/dist/flatpickr.css”）