如何在 vue 组件的 datetimepicker 引导程序中获得价值？

Question

我的视图刀片，你可以在下面看到这个：

...
<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-model

但是，当我点击按钮时，

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

是空的

显示为空

为什么它不起作用？

我该如何解决？

Answer 1

不能指望任何 javascript 技术在它成名之前完成。就这样，我尝试了从使用moment 到vue-datapicker 的所有建议。所有建议都严重破坏了设计，需要在mounted 下的vue 初始化中对div id 进行硬编码。不能以这种方式将黑客技术引入我的项目。搞砸了设计和实现的整洁。

我使用普通的旧 jsp 修复了它。在保存时，我只是这样做了

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

我将在我的 java 控制器中计算日期格式到 milliseconds 的转换。

Answer 2

您不能使用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 作为 props 传递给 parent：

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

这是 JSFiddle：https://jsfiddle.net/rvederzc/

编辑

关于如何创建日期选择器组件，以下是我将如何使用 Vue.js 实现 jQuery 日期选择器：

<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/