vueコンポーネントのdatetimepickerブートストラップでどのように値を取得できますか？

Question

私の見解ブレード、あなたは以下の本見ることができます：

<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字モデルを使用して：

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

マイオーダービューコンポーネントを、あなたは下記これを見ることができますボタンをクリックすると、結果は

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/

EDIT

日付ピッカーコンポーネントの作成方法についての言及は

は、ここで私はVue.jsを使用してjQueryの日付ピッカーを実装してみましょう：

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

：

<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とそれをバインドすることができます

JSFiddleは次のとおりです。https://jsfiddle.net/g64drpg6/

Answer 2

カントは有名になる前にすべてのjavascript技術が完成すると期待しています。それでは、私はmomentからvue-datapickerまでのすべての推奨事項を試してみました。すべての推奨事項が大幅に設計を破り、mountedのvueの初期設定でdividのハードコードが必要でした。このように私のプロジェクトにハントを導入しています。デザインと実装の面白さを混乱させる。

普通の古いjspを使って修正しました。保存時に、私はちょうどこの

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

は、私は私のJavaのコントローラにmillisecondsに日付フォーマットの変換を見つけ出すだろうでした。