javascript - tutorial - propiedad this. $ el undefined en el componente de archivo único vue js

vuejs 3

Question

Intento crear un componente global usando laravel mix con vue js, pero cuando se accede a la propiedad this.$el no está definido. Aquí está mi archivo de componente:

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>

Pero, cuando el componente se crea como X-Template, funciona:

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 no existe hasta que esté mounted .

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

Vea el diagrama del ciclo de vida en la documentación.