Question

我尝试使用Vue组件，但是不起作用。

我也像预处理器一样使用Pug（Jade）。

但是在结果HTML代码中，我具有未从Vue组件转换为HTML代码的原始模板。

这是Vue组件：

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>'
});

这是PUG代码：

    +agreementModal('MYMODAL','MODAL NAME')
        .date-range.text-nowrap
            date-input.mr-3
            date-input

结果HTML代码：

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

Answer 1

欢迎您！

您似乎有时initialize your Vue app（和new Vue()在一起）。

声明Vue.component很重要，这样Vue知道如何处理自定义组件，但是仍然需要告诉Vue通过初始化来开始管理DOM的一部分。

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>

在HTML代码中调用时未插入Vue组件

1 个答案: