javascript - tutorial - propiedad this. $ el undefined en el componente de archivo único vue js
vuejs 3 (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.
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>