v-model 不适用于 bootstrap datepicker [英] v-model not working with bootstrap datepicker

问题描述

场景

我正在更改主题默认和超级丑陋的日期选择器并决定使用引导程序日期选择器，发现 此处.我遇到的问题是，当我使用 datepicker 时，我的v-model"属性没有做任何事情，但是当我在输入字段中输入时它会做一些事情.

代码

//Html<div class="position-relative has-icon-left"><input v-model="user.date_of_birth" placeholder="dd/mm/yyyy" id="date-of-birth" class="form-control datepicker" name="date">@{{ user.date_of_birth }}

//javascript$('.datepicker').datepicker({格式:'dd/mm/yyyy',设置日期:新日期()});

日期选择器工作并被初始化，它改变了输入字段上的值.我的问题是 v-model 完全被忽略，除非我在现场实际输入！

问题

我如何让 v-model 与这个日期选择器一起工作?v-model 不能与此日期选择器一起使用是否有特定原因?

解决方案

你可以这样使用v-model:

<my-date-picker v-model="date"></my-date-picker>{{日期}}
Vue.component('我的日期选择器',{模板:'<input type="text" v-datepicker class="datepicker" :value="value" @input="update($event.target.value)">',指令:{日期选择器: {插入(el，绑定，vNode){$(el).datepicker({自动关闭:真，格式:'yyyy-mm-dd'}).on('changeDate',function(e){vNode.context.$emit('input', e.format(0))})}}},道具:['价值']，方法: {更新(五){this.$emit('输入', v)}}})var app = new Vue({el: '#app',数据: {日期:'2018-03-01'}})

Scenario

I'm changing a themes default and super ugly datepicker and decided to use bootstraps datepicker, found here. The problem im having is that my 'v-model' attribute isnt doing anything when i use the datepicker, but its doing something when i type in the input field.

Code

// Html
<div class="position-relative has-icon-left">
    <input v-model="user.date_of_birth" placeholder="dd/mm/yyyy" id="date-of-birth" class="form-control datepicker" name="date">
    @{{ user.date_of_birth }}
</div>

// javascript
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    setDate: new Date()
});

the datepicker works and is initialised and it changes the value on the input field. My problem is that v-model is completely ignored unless i physically type in the field!

Question

How do i get v-model to work with this datepicker? Is there a specific reason that v-model isn't working with this datepicker?

解决方案

you can use v-model like this：

<div id="app">
    <my-date-picker v-model="date"></my-date-picker>
    {{date}}
</div>


Vue.component('my-date-picker',{
    template: '<input type="text" v-datepicker class="datepicker" :value="value" @input="update($event.target.value)">',
    directives: {
        datepicker: {
            inserted (el, binding, vNode) {
                $(el).datepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd'
                }).on('changeDate',function(e){
                    vNode.context.$emit('input', e.format(0))
                })
            }
        }
    },
    props: ['value'],
    methods: {
        update (v){
            this.$emit('input', v)
        }
    }
})


var app = new Vue({
    el: '#app',
    data: {
        date: '2018-03-01'
    }
})

这篇关于v-model 不适用于 bootstrap datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！