I'm trying to create a global component using laravel mix with vue js, but when accessing property this.$el it's undefined. Here's my component file:

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>

But, when the component is created as X-Template it works:

client.js

Vueponent('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>

I'm trying to create a global component using laravel mix with vue js, but when accessing property this.$el it's undefined. Here's my component file:

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>

But, when the component is created as X-Template it works:

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>

• javascript
• vue.js
• vuejs2
• vue-component
• laravel-mix

1 Answer 1

$el doesn't exist until mounted.

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

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

See the lifecycle diagram in the documentation.