vuejs vue tutorial how ejemplos componentes cli certification javascript vue.js vuejs2 vue-component laravel-mix

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>