时间戳

首页 > 解决方案 > 绑定到 vue v-model 的 bootstrap-datepicker 在失去焦点时恢复到以前的数据

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

问题描述

我有一个表单，其中日期选择器跟随文本输入。给出文本输入后，日期选择器从 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>

如果遵循这些步骤，可以在这个小提琴中观察到这一点

  1. 在顶部输入中输入任意数字
  2. 然后标签到日期选择器输入
  3. 单击“设置日期”按钮（模拟接收数据）
  4. 然后通过单击再次关注日期选择器输入
  5. 现在跳到下一个输入
  6. 日期选择器中的日期已恢复为之前的值

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

我已经尝试过这个问题的解决方案，但行为是一样的。

标签： javascriptjqueryvue.jsbootstrap-datepicker

解决方案

问题是日期选择器控制的实际日期值，在这种情况下，使用v-model. 以至于将 设置theDate为任何值并不会真正影响任何事情。这是可以理解的，因为您使用的是具有 jQuery 依赖项的 Bootstrap。我会推荐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);
    }
  }
})

基本上，您需要使用提供的 API 更新日期。

推荐阅读