プロパティthis。$ elは単一ファイルコンポーネントで定義されていません。vue js

Question

laravel mixとvue jsを使用してグローバルコンポーネントを作成しようとしていますが、プロパティthis.$elにアクセスすると定義されません。コンポーネントは、それが動作するX-テンプレートとして作成され

Datepicker.vue

<template> 
<input 
    type="text" 
    :name="name" 
    :class="myclass" 
    :placeholder="placeholder" 
    :value="value" /> 
</template> 

<script> 
export default { 
    props: ['myclass','name','placeholder','value'], 
    data() { 
    return { 

    } 
    }, 
    created() { 
    console.log("this.$el", this.$el); //undefined 
    console.log("this", this); //$el is defined 
    var vm = this; 
    var options = { 
     "locale": "es",   
     "onChange": function(selectedDates, dateStr, instance) { 
      vm.$emit('input', dateStr); 
     } 
     }; 

    $(this.$el) 
     // init 
     .flatpickr(options);  
    }, 
    destroyed(){ 
    console.log("destroyed"); 
    } 
} 
</script> 

しかし、：：ここに私のコンポーネントファイルの

client.js

Vue.component('date-picker', { 
    props: ['myclass','name','placeholder','value'], 
    template: '#datepicker-template', 
    mounted: function() { 
    var vm = this; 
    var options = { 
     "locale": "es",   
     "onChange": function(selectedDates, dateStr, instance) { 
      vm.$emit('input', dateStr); 
     } 
     }; 

    $(this.$el) 
     // init 
     .flatpickr(options);  
    }, 
    destroyed: function() { 
    console.log("destroyed"); 
    } 
}); 

create.blade.php

<script type="text/x-template" id="datepicker-template"> 
    <input 
    type="text" 
    :name="name" 
    :class="myclass" 
    :placeholder="placeholder" /> 
</script> 

Answer 1

$elは、mountedまで存在しません。

mounted() { 
    var vm = this; 
    var options = { 
     "locale": "es",   
     "onChange": function(selectedDates, dateStr, instance) { 
      vm.$emit('input', dateStr); 
     } 
    }; 

    $(this.$el) 
    // init 
    .flatpickr(options);  
}, 

は、マニュアルでlifecycle diagramを参照してください。