代码之家  ›  专栏  ›  技术社区  ›  06011991

使用一个带有vue的装入函数获取两个datepicker输入值

  •  0
  • 06011991  · 技术社区  · 6 年前

    date picker . 但不明白我该怎么做? 代码如下: HTML格式:

    <div id="app">
    <form v-on:submit.prevent="saveFleetJob">
    <input type="text" class="fleet-date" v-model="item.from">
    <input type="text" class="fleet-date" v-model="item.to">
    <button  class="btn btn-primary">Click</button>
    </form>
    </div>
    

    new Vue({
      el: "#app",
      data: {
      item: {
                    from:'',
                    to:''
                },
      },
      mounted() {
    
            $(".fleet-date").datepicker().on(
                "changeDate", () => {
                    this.item.from = $('.fleet-date').val()
                }
            );
       },
      methods: {
        saveFleetJob() {
                alert(JSON.stringify(this.item));
            },
      }
    })
    

    js fiddle demo link here

    有什么建议吗?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Maksim Nesterenko    6 年前

    正如斯芬克斯所指出的,有些语境混乱,但这并不是唯一的问题。

    请看这个更新的小提琴: https://jsfiddle.net/pb91fk6o/

    你得加上

    elem.dispatchEvent(new Event('input'))
    

    让这一切顺利。

      mounted() {
            $(".fleet-date")
            .datepicker()
            .on("changeDate", (e) => {
              e.target.dispatchEvent(new Event('input')) 
            })
       },
    

    有关详细信息,请参阅本期: https://github.com/vuejs/vue/issues/2804