Question

方案

我正在更改主题默认和超级丑陋的日期选择器，并决定使用bootstraps datepicker，找到here。我遇到的问题是我的'v-model＆＃39;当我使用datepicker时，属性没有做任何事情，但是当我在输入字段中输入时它会做某事。

代码

<li>
  <a
    id="profile"
    ref={(ref) => { this.profile = ref; }}
    onClick={() => this.handleClickOnLink(this.profile && this.profile.getAttribute('id'))}
  >
    Profile
  </a>
</li>

datepicker工作并初始化，它会更改输入字段的值。我的问题是v-model被完全忽略，除非我在字段中输入物理内容！

问题

如何让v-model使用此datepicker？是否有特定原因使v-model不能使用此日期选择器？

Answer 1

你可以像这样使用v-model：

<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'
    }
})

Answer 2

我在jacky's answer上失败了，但是由于https://github.com/Xelia，问题得以解决（即使在Vue 1.0中，使用ready生命周期而不是mounted）

在日期选择器changeDate事件侦听器中手动更新vue数据，如下所示

var app = new Vue({
  el: '#app',
  data: {
    startDate: '',
  },
  mounted() {
    $("#startDate").datepicker().on(
      "changeDate", () => {this.startDate = $('#startDate').val()}
    );
  },
})

https://jsfiddle.net/3a2055ub/

顺便说一句，如果您正在使用ES5功能而不是ES6粗箭头功能来处理旧公司项目。需要将{v1实例} this绑定到函数中。例如：

mounted() {
  var self = this; // the vue instance
  $("#startDate").datepicker().on(
    "changeDate", function() {self.startDate = $('#startDate').val()}
  );
},

当然，还有其他方法可以实现这一目标，如this blog written by Jason Arnold 所示。

参考：https://github.com/vuejs/vue/issues/4231

可能的相关问题：V-model with datepicker input

v-model不能使用bootstrap datepicker

2 个答案: