属性this。$ el未定义单个文件组件vue js

Question

我试图用vue js创建一个使用laravel混合的全局组件，但是当访问属性this.$el时，它未定义。这是我的组件文件：

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> 

但是，当组件作为X-模板它的工作原理创建：

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。