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

您无法使用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/

修改

关于如何创建日期选择器组件的参考，以下是如何使用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/

Answer 2

不能期望任何javascript技术在它成名之前完成。为此，我尝试了使用moment到vue-datapicker的所有建议。所有建议都严重破坏了div id初始化vue初始化中mounted vuedata.dateOfBirthMilliSecs = $("#dateOfBirth").val() ;的设计和硬编码。不能用这种方式将hacks引入我的项目中。完善设计和实现整洁。

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

milliseconds

我将在我的java控制器中找出日期格式转换为def histogram(l): count = 0 x=[] k=[] for i in range(len(l)): index=i count=0 for j in range(index,len(l)): if l[index] == l[j] and l[index] not in k : count =count + 1 k = k + [l[index]] if (count != 0): x = x + [(l[index], count)] x.sort() x=sorted(x,key=lambda x:x[1]) return x #print(histogram([13,12,11,13,14,13,7,7,13,14,12]))的方法。

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

2 个答案: