Vue2 и jquery-ui datepicker :: minDate не обновляются динамически - PullRequest
Новая
       38

Vue2 и jquery-ui datepicker :: minDate не обновляются динамически

0 голосов
/ 25 апреля 2019

Я пытаюсь обновить информацию о датчике jquery-ui на основе выбора раскрывающегося списка.

Я добавляю средство выбора даты, когда компонент смонтирован, и эти параметры работают нормально.

Я пытаюсь обновить minDate при щелчке по входу с помощью события клика Vuejs.

Я знаю, что совместное использование Vue и Jquery не является идеальным, но мне не разрешено использовать CLI в этом проекте, и поэтому я не могу использовать другие датчики Vue.

Что я делаю не так? 

<script type="text/x-template" id="modal-template">
    <div class="modal">
        <input class="datepicker"
               v-model="statusDate"
               v-on:click="updateDatePickerMinDate()" />
        <select v-model="statusTypeEnum">
            <option value="1">Status 1</option>
            <option value="2">Status 2</option>
        </select>
    </div>
</script>

Vue.component('date-picker-modal', {
  template: "#modal-template",
  props:["statusDate","statusTypeEnum"],
  methods: {
    updateDatePickerMinDate: function(){
        var self = this;
        var minDate = "-90d";

        if (self.$root.statusTypeEnum === "2") {
            minDate = "-180d";
        }
        $(self.$el).find(".datepicker").datepicker("options", {
            minDate: minDate
        });
    }
  },
  mounted: function() {
    var self = this;
    $(self.$el).find(".datepicker").datepicker({
        onSelect: function (selectedDate, datePicker) {
                    self.$root.startDate = selectedDate;
        },
        maxDate: "+0d"
    });
  },
  beforeDestroy: function() {
    var self = this;
    $(self.$el).find(".datepicker").datepicker('hide').datepicker('destroy');
  }
});
...