Vue组件中jQuery Date Picker与v-model绑定失效，如何获取选中日期？

这个问题我碰到过很多次啦，核心原因很明确：jQuery Datepicker是直接操作DOM来修改输入框的值，而Vue的v-model是通过监听输入框的input/change事件来同步数据的——但Datepicker在选中日期后，并没有触发这些Vue能识别的事件，所以你的this.date一直是空值，自然在search方法里打印不出内容。

解决方案：利用Datepicker的onSelect回调手动同步数据 #

你需要在初始化Datepicker的时候，配置它的onSelect回调函数，在用户选中日期后，手动把选中的值同步到Vue的响应式数据中。这里要注意处理好this的指向，确保它指向Vue组件实例。

修改后的完整组件代码如下：

<form @submit.prevent="search()">
  <div class="card">
    <div class="card-body">
      <div class="card-header"></div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-8">
            <input type="text" v-model="date" class="form-control" id="datepicker">
          </div>
          <div class="col-md-4">
            <button class="btn btn-primary">Search</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<script>
export default {
  data() {
    return {
      date: ''
    }
  },
  mounted() {
    console.log('Component mounted.')
    // 初始化jQuery Datepicker并配置回调
    $('#datepicker').datepicker({
      // 使用箭头函数确保this指向Vue组件实例
      onSelect: (selectedDate) => {
        // 手动将选中的日期同步到Vue的data中
        this.date = selectedDate
        // 可选：如果需要触发input事件让v-model的双向绑定更彻底（其实直接赋值已经足够）
        // $('#datepicker').trigger('input')
      }
    })
  },
  methods: {
    search() {
      console.log(this.date) // 现在就能拿到用户选中的日期啦
    },
  },
}
</script>

关键点说明 #

1. onSelect回调：这是jQuery Datepicker提供的钩子，当用户选中一个日期时会触发，参数就是选中的日期字符串。
2. this的指向：用箭头函数可以避免this指向Datepicker实例，确保它指向Vue组件，这样就能直接访问this.date。如果你不习惯箭头函数，也可以用bind(this)来绑定上下文：

   onSelect: function(selectedDate) {
     this.date = selectedDate
   }.bind(this)
   

3. 直接赋值vs触发事件：直接给this.date赋值已经能让Vue的响应式数据更新，所以search方法里就能拿到值。如果需要让输入框的v-model也通过事件同步（其实没必要，因为我们已经直接改了数据），可以手动触发input事件，如代码中的注释部分。

这样修改后，你点击搜索按钮时，console.log(this.date)就能正常输出用户选中的日期了。

内容的提问来源于stack exchange，提问作者David