34159


Vueを勉強し始めて２ヶ月程です。

BootstrapTimepickerを利用して単純なバインドを試しているのですが、  
<http://jdewit.github.io/bootstrap-timepicker/>

Timepickerで更新される値がVueで更新を検知できずバインディングがされません。

カスタムイベント等も試してみたのですが、なぜか検知できず。  
今はVue用に自前でTimePickerコンポーネントを作ることを考えていますが、  
原因だけ知りたいという探究心から調査していますが全くわかりません。

よろしくお願いします。

[code]

    var app = new Vue({
     el: '#app',
     data:{
      time: "12:00 AM"
        }
    });
[/code]

[code]

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
    <script type="text/javascript"  src="//unpkg.com/vue"></script>
    <div id="app">
      <input v-model="time" data-provide="timepicker">
      <div>
      {{ time }}
      </div>
    </div>
[/code]


CC BY-SA 3.0
2017-04-20T05:13:53.313
34145
2017-04-20T09:28:33.650
22665
question
javascript bootstrap vue.js
VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない


きちんとソースから確認したわけではありませんが、  
<https://github.com/vuejs/vue/issues/4231>  
と同じ理由で、jQueryのchangeだけしか呼ばれないのが原因かと思います

ならば、それをトラップしてやってvueへ伝えてやれば動きます。

[code]

    <html>
    <body>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"
    />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <div id="app">
        <input v-model="time" data-provide="timepicker" id="time">
        <div>
            {{ time }}
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                time: "12:00 AM"
            },
            mounted() {
                $('#time').timepicker().on(
                    'change', () => { this.time = $('#time').val() }
                )
            }
        });
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-04-20T09:28:33.650
34159
2017-04-20T09:28:33.650
15705
34145
answer