bootstrap-绑定vue v-model的datepicker在失去焦点时恢复到之前的数据

Question

我有一个表单，其中日期选择器跟在文本输入之后。给出文本输入后，日期选择器从 ajax 调用中接收到一个日期。现在焦点在日期选择器上，它显示（如预期的那样）接收日期。当用户切换到下一个输入时，日期选择器将恢复到其之前的数据，在大多数情况下最终成为占位符。

vue 应用程序代码：

var app = new Vue({
  el: "#app",
  data: {
    theDate: '',
    aNumber: 0,
    bNumber: 0
  },
  mounted() {
    $("#aDate").datepicker({
      format: 'dd/mm/yyyy'
    });
    $("#aDate").datepicker().on(
      "changeDate", () => {
        this.theDate = $('#aDate').val()
      }
    );

  },
  methods: {
    check() {
      console.log('theDate: ' + this.theDate + ', aNumber: ' + this.aNumber + ', bNumber: ' + this.bNumber);
    },
    setDate() {
        this.theDate = '18/12/2018';
    }
  }
})

和 html:

<body>
  <div id="app">
    <input type="text" id="bNumber" v-model="bNumber" /><br>
    <input type="text" id="aDate" placeholder="mm/dd/yyyy" v-model="theDate" /><br>
    <input type="text" id="aNumber" v-model="aNumber" /><br>
    <button type="button" @click="check">Check</button>
    <button type="button" @click="setDate">Set Date</button>
  </div>
</body>

如果按照这些步骤

，可以在 this fiddle 中观察到这一点

在最上面输入任意数字
然后选择日期选择器输入
点击"Set Date"按钮（模拟接收数据）
然后通过单击再次关注日期选择器输入
现在切换到下一个输入
日期选择器中的日期已恢复为之前的值

如何防止这种情况发生并使数据持久化？

我已经尝试了的解决方案，但行为是一样的。

Answer 1

问题在于日期选择器控制的实际日期值，在这种情况下使用 v-model 毫无意义。如此之多以至于将 theDate 设置为任何值都不会真正影响任何东西。这是可以理解的，因为您使用的 Bootstrap 具有 jQuery 依赖性。我会推荐 Vue-flatpickr 作为替代方案。但如果您需要坚持这样做，这里有一个可能的解决方法：

为简洁起见，我删除了不必要的属性：

<input type="text" ref="datepicker" placeholder="mm/dd/yyyy" />

var app = new Vue({
  el: "#app",
  data: {
    theDate: '',
    aNumber: 0,
    bNumber: 0
  },
  mounted() {
    $(this.$refs.datepicker).datepicker({
      format: 'dd/mm/yyyy'
    })
    .on("changeDate", e => {
      this.update(e.target.value);
    });
  },
  methods: {
    check() {
      console.log('theDate: ' + this.theDate + ', aNumber: ' + this.aNumber + ', bNumber: ' + this.bNumber);
    },
    setDate() {
      this.update('18/12/2018');
    },
    update(value) {
      $(this.$refs.datepicker).datepicker("update", value);
    }
  }
})

基本上，你需要update the date with the provided API。

bootstrap-绑定vue v-model的datepicker在失去焦点时恢复到之前的数据

bootstrap-datepicker bound to vue v-model reverts to previous data when losing focus

javascript

jquery

bootstrap-datepicker

vue.js