bootstrap-datepicker, привязанный к vue v-модели, возвращается к предыдущим данным при потере фокуса - PullRequest
Новая
       10

bootstrap-datepicker, привязанный к vue v-модели, возвращается к предыдущим данным при потере фокуса

0 голосов
/ 13 декабря 2018

У меня есть форма, в которой указатель даты следует за вводом текста.После того, как введен текст, средство выбора даты получает дату от вызова 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. ЗатемВкладка для ввода DatePicker
  3. Нажмите кнопку «Установить дату» (имитация полученных данных)
  4. Затем снова сфокусируйтесь на вводе DatePicker, щелкнув по нему
  5. Теперь перейдите на вкладку, чтобыследующий ввод
  6. Дата в датчике вернулась к предыдущему значению

Как это можно предотвратить и сделать данные постоянными?

Я пыталсярешение от этот вопрос но поведение такое же.

1 Ответ

0 голосов
/ 13 декабря 2018

Проблема заключается в фактическом значении даты, контролируемом средством выбора даты, и в этом случае нет смысла использовать 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);
    }
  }
})

По сути, вам нужно обновить дату с помощью предоставленного API .

...