속성을 지정합니다.단일 파일 구성 요소 vue js에 $el이 정의되지 않았습니다.

속성을 지정합니다.단일 파일 구성 요소 vue js에 $el이 정의되지 않았습니다.

vue js와 larabel mix를 사용하여 글로벌컴포넌트를 생성하려고 하는데 속성에 액세스 할 때this.$el정의되지 않았습니다.내 컴포넌트 파일은 다음과 같습니다.

데이트 피커.표시하다

<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-Template로 작성되면 다음과 같이 동작합니다.

client.displaces를 설정합니다.

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>

$el까지는 존재하지 않는다.mounted.

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

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

매뉴얼의 라이프 사이클 다이어그램을 참조하십시오.

언급URL : https://stackoverflow.com/questions/45402403/property-this-el-undefined-on-single-file-component-vue-js