如何在vue组件上的datetimepicker引导中获取价值? [英] How can I get value in datetimepicker bootstrap on vue component?

问题描述

我的视图刀片，您可以在下面看到它:

My view blade, you can see this below :

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

我的订单视图组件，您可以在下面看到它:

My order-view component, you can see this below :

<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-模型

I using v-model like above code

但是，当我单击按钮时，

But, when I click the button, the result of

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

为空

显示为空

为什么不起作用?

我该如何解决?

推荐答案

您无法使用v-model绑定插槽，并且期望Vue会将其自动附加到您的插槽输入中，但是我看不到任何原因您仍然需要在此处使用插槽.看起来您只需要可以将自定义属性附加到的输入，就可以通过将属性作为prop传递并使用v-bind绑定它们来实现:

You cannot bind a slot using v-model and expect that Vue will attach that automatically to your slot input, but I can't see any reason why you need to use a slot here anyway. It looks like you just want an input that you can attach custom attributes to and you can do that by passing the attributes as a prop and use v-bind to bind them:

<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作为道具传递给父项:

Now you can just pass your attrs as a prop in the parent:

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

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

Here's the JSFiddle: https://jsfiddle.net/rvederzc/

编辑

关于如何创建日期选择器组件的参考，这是我将如何使用Vue.js实现jQuery datepicker的方法:

In reference as to how to create a date picker component, here's how I would implement a jQuery datepicker using 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绑定:

You can then bind that with v-model in the parent:

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

这是JSFiddle: https://jsfiddle.net/g64drpg6/

Here's the JSFiddle: https://jsfiddle.net/g64drpg6/

这篇关于如何在vue组件上的datetimepicker引导中获取价值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！