vue.jsが正しく動作していないbootstrap-datetimepicker

Vue.jsでbootstrap-datepickerを使用しようとしています単純なdatepickerコンポーネントを作成しようとしています。問題は、入力に書き込むと、コンポーネントのデータが更新されることです。しかし、私はdatepicker GUIを使用して、それは動作しません。データが更新されません。どうして？正確に欠けているのは何ですか？ここでvue.jsが正しく動作していないbootstrap-datetimepicker

は私のコードです：

Vue.component('picker', { 
 
    'props': { 
 
    'date': { 
 
     'twoWay': true 
 
    } 
 
    }, 
 
    'template': '\ 
 
     <div class="form-group">\ 
 
      <div class="input-group date datepicker">\ 
 
       <input type="text" class="form-control" v-bind:value="this.date">\ 
 
       <span class="input-group-addon">\ 
 
        <span class="glyphicon glyphicon-calendar"></span>\ 
 
       </span>\ 
 
      </div>\ 
 
     </div>', 
 
    'watch': { 
 
    'date': function(value) { 
 
     console.log('Updated!'); 
 
    } 
 
    }, 
 
    'mounted': function() { 
 
    $(this.$el.firstChild).datetimepicker(); 
 
    } 
 
}); 
 

 
app = new Vue({ 
 
    'el': '#app', 
 
    'data': {} 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <!-- JQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <!-- Transition ve Collapse --> 
 
    <script src="collapse.js"></script> 
 
    <script src="transition.js"></script> 
 

 
    <!-- Moment JS --> 
 
    <script src="moment-with-locales.min.js"></script> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <!-- Datetime picker --> 
 
    <script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div id="app" class="row"> 
 
     <div class='col-sm-6'> 
 
     <picker></picker> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    </script> 
 
</body> 
 
<script src="app.js"></script> 
 

 
</html>

出典

2017-01-23 nejdetckenobi

私はピッカーコンポーネントは小道具 'date'を受け入れる見るが、それは私はあなたがどこでもデータに日付を定義した参照いけないテンプレート –

で'コンポーネント '上で定義されて見ることができないので。 – Saurabh

@BelminBedak私はHTML部分の 'date' propの初期値を与えませんでした。 @Saurabhそれは小道具でした。だから私はそれをVueインスタンスで定義する必要はありません。そうですか？コードを更新しました。 – nejdetckenobi

私はフォーカス（ぼかし）を失うことよりも、より良い方法を見つけることができませんでした。

ここに私のコードです：あるあなたの要素がフォーカスを失っていない場合、あなたが実際にそれを使用することはできません

Vue.component('picker', { 
    'props': ['date'], 
    'template': '\ 
     <div class="form-group">\ 
      <div class="input-group date datepicker">\ 
       <input type="text" class="form-control" :value="this.date" v-on:focus="datepick_dialog_open" v-on:blur="select_by_lose_focus">\ 
       <span class="input-group-addon">\ 
        <span class="glyphicon glyphicon-calendar"></span>\ 
       </span>\ 
      </div>\ 
     </div>', 
    'mounted': function() { 
     $(this.$el.firstChild).datetimepicker(); 
    }, 
    'methods': { 
     'datepick_dialog_open': function() { 
      this.$el.firstChild.children[1].click(); 
     }, 
     'select_by_lose_focus': function() { 
      console.log('AHOY!'); 
      this.date = this.$el.firstChild.firstChild.value; 
     } 
    } 
}); 

app = new Vue({ 
    'el': '#app', 
    'data': {} 
});

ポイント。入力がフォーカスを失ったときにデータを更新します。 IDKより良い方法。

v-on:focusは無関係です。入力がフォーカスを獲得すると、datetime picker UIが開きます。

メインジョブはselect_by_lose_focusで実行されます。

出典

2017-01-23 14:45:58 nejdetckenobi

-1

複数の行が含まれているため、テンプレートの代わりに `を使用します。

これはあなたの問題を解決します:)回答@nejdetckenobiため

出典

2017-03-10 16:45:39 Rashid

おかげで、日付のみを選ぶ場合は、ぼかしアプローチが動作します。しかし、を両方ともの日付&の時刻にピッキングすると、ボケのアプローチがあまりうまくいかないことがわかりました。

代わりに私はVue.jsラッパーコンポーネントの例に従いました。それはon('change', function(){})と$emitを使用します。

私のために働いていた以下のコードは、日付形式の私の設定で、キー部分はvue component宣言のmountedセクションにあります。

Vue.component('datetime', { 
    props: ['value'], 
    template: '<input class="form-control" id="override-datetime-field"></input>', 
    mounted: function() { 
    var vm = this 
    $(this.$el) 
     .datetimepicker() 
     .val(this.value === '' ? '' : moment(this.value).format('DD-MMM-YYYY, h:mm a')) 
     .trigger('change') 
     .on('change', function() { 
     vm.$emit('input', this.value) 
     }) 
    }, 
    watch: { 
    value: function (value) { 
     $(this.$el).val(value).trigger('change'); 
    } 
    } 
}

重要な部分はここにある：

$(an-element).datetimepicker().trigger('change') 
.on('change', function() { 
    vm.$emit('input', this.value) 
})

オリジナルソース例：https://vuejs.org/v2/examples/select2.html

出典

2017-07-14 04:41:11 michaelqz

別の例コンポーネントに発する$を使用し、Vモデル。このページでは、v-modelをサポートするためにvalueと$ emitが必要な理由について説明します。検証のためにフォーム要素名とオプションの必須クラスが必要でした。

https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

<picker name="start_date_1_1" required="1" v-model="res.start_date"></picker> 

    Vue.component('picker', { 
    props: ['name', 'value', 'required'], 
    template: '\ 
     <div class="form-group">\ 
      <div class="input-group date">\ 
       <input :name="name" type="text" class="form-control" v-bind:class="{required: required}" v-bind:value="value">\ 
       <span class="input-group-addon">\ 
        <span class="glyphicon glyphicon-calendar"></span>\ 
       </span>\ 
      </div>\ 
     </div>', 
    mounted: function() { 
     var self = this; 
     var picker = $(this.$el.firstChild).datepicker({autoclose: true}); 
     picker.on('changeDate', function(e) { 
     self.$emit('input', e.date.toLocaleDateString("en-US", {day: '2-digit', month: '2-digit', year: 'numeric'})); 
     }); 
    } 
    });

出典

2018-01-06 21:29:43

vue.jsが正しく動作していないbootstrap-datetimepicker

答えて

関連する問題