如何使用帶有vue組件的flatpickr？

Question

免責聲明：我是vue.js的新手

我需要幫助讓日期選擇器與我的模態組件一起工作。 我已經制作了模態和工作人員，我還安裝了一個日期選擇器（'flatpickr'），當我在不在組件內的元素上調用它時，它工作正常。

但是，當我嘗試在模態上使用它時，沒有任何反應。 我不確定我應該在組件中調用日期選擇器，因為我認為你應該避免放任何副作用，因為他們不會解析。

我不確定應該包括flatpickr腳本，它應該在模板內還是應該在我的主app.js中。

我的模態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>

flatpickr腳本

<script>
 $("#talentDOB").flatpickr({
 enableTime: true,
 dateFormat: "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>

先謝謝你。

Answer 1

首先，導入組件。

import flatpickr from 'flatpickr'

然后在mount中創建flatpicker實例

flatpickr('#datepicker')

當然，您需要具有相同ID的輸入

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

實際上沒有任何特殊要求你在Vue中使用它。