我怎样才能在VUE组件的DateTimePicker自举值？(How can I get value

我的看法刀片，你可以在下面看到：

...
<div class="panel-body">
    <order-view v-cloak>
        <input slot="from-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="from_date" id="datetimepicker" required>
        <input slot="to-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required>
    </order-view>
</div>
...

我的订单视图组件，你可以在下面看到：

<template>
    <div>
        <div class="col-sm-2">
            <div class="form-group">
                <slot name="from-date" required v-model="fromDate"></slot>
            </div>
        </div>
        <div class="col-sm-1">
            <div class="form-group" style="text-align: center">
                -
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">                           
                <slot name="to-date" required v-model="toDate"></slot>
            </div>
        </div>
        <div class="col-sm-4">
            <button v-on:click="filter()" class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                fromDate: '',
                toDate: ''
            }
        },
        methods: {
            filter: function() {
                console.log(this.fromDate)
                console.log(this.toDate)
            }
        }
    }
</script>

我使用V模型像上面的代码

但是，当我按一下按钮，结果

console.log(this.fromDate)
console.log(this.toDate)

是空的

它显示空

为什么它不工作？

我该如何解决呢？

Answer 1:

您不能使用绑定插槽v-model和预期Vue将自动附上您的插槽输入，但我看不出有任何理由，你需要在这里反正使用的插槽。 它看起来像你只是想，你可以自定义的附加输入属性，你可以做到这一点通过将属性的prop ，并使用v-bind绑定它们：

<template>
  <div>
    <input v-bind="attrs" v-model="fromDate" />
    <button @click="filter">filter</button>
 </div>
</template>


export default{
  props: ['attrs'],
  methods: {
    filter() {
      console.log(this.fromDate)
    }
  },
  data() {
    return {
      fromDate: ""
    }
  }
}

new Vue({
  el: "#app",
  data: {
    fromDateAttrs: {
      'data-date-format': "DD-MM-YYYY",
      title: "DD-MM-YYYY",
      type: "text",
      class: "form-control",
      placeholder: "Date",
      name: "from_date",
      id: "datetimepicker",
    }
  }
});

现在，你可以通过你的attrs如父道具：

<my-comp :attrs="fromDateAttrs"></my-comp>

这里的的jsfiddle： https://jsfiddle.net/rvederzc/

编辑

在谈到关于如何创建一个日期选取器组件，这里是我将如何实现使用jQuery的日期选择器Vue.js ：

<template id="date-picker">
  <div>
    <input v-bind="attrs" v-model="date" @input="$emit('input', $event.target.value)" v-date-picker/>
  </div>
</template>

<script type="text/javascript">
export default {
  props: ['attrs'],
  directives: {
    datePicker: {
      bind(el, binding, vnode) {
        $(el).datepicker({
          onSelect: function(val) {
            // directive talk for 'this.$emit'
            vnode.context.$emit('input', val);
          }
        });
      }
    }
  }
}
</script>

然后，您可以绑定与v-model父：

<date-picker v-model="myDate"></date-picker>

这里的的jsfiddle： https://jsfiddle.net/g64drpg6/

Answer 2:

广东话指望任何JavaScript技术是完整的它变得著名之前。 通过走出去，我尝试使用所有建议moment到vue-datapicker 。 所有的建议很大程度上打破了设计所需的硬编码div id中的vue在初始化mounted 。 广东话介绍黑客到我的项目这种方式。 食堂的设计与实现整洁。

我固定它使用普通的旧的JSP。 在保存，我只是做这个

vuedata.dateOfBirthMilliSecs = $("#dateOfBirth").val() ;

我会想出日期格式转换为milliseconds在我的Java控制器。

文章来源: How can I get value in datetimepicker bootstrap on vue component?