[Vuejs]-Vue component is not inserted when called in HTML code

by

0👍

Welcome to SO!

You do not seem to initialize your Vue app (with new Vue()) at some point.

Declaring Vue.component is important so that Vue knows what to do with your custom components, but you still need to tell Vue to start managing a part of your DOM by initializing it.

Vue.component('date-input', {
  props: ['id', 'format', 'value'],
  mounted: function() {
    $(this.$el).children().last().datepicker({
      autoclose: true,
      format: this.format || 'dd.mm.yyyy',
      language: 'ru'
    });
  },
  beforeDestroy: function() {
    $(this.$el).children().last().datepicker('destroy');
  },
  methods: {
    onInput: function(event) {
      this.$emit('input', event.target.value);
    },
    onIconClick: function() {
      $(this.$el).children().last().datepicker('show');
    }
  },
  template: '<div class="date-field">' +
    '<span class="icon calendar" @click="onIconClick"></span>' +
    '<input id="id" class="form-control" type="text" @input="onInput" :value="value">' +
    '</div>'
});

new Vue({
  el: '#app'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/vue@2"></script>

<div id="app" class="date-range text-nowrap">
  <date-input class="mr-3"></date-input>
  <date-input></date-input>
</div>

Leave a comment