vue.js bootstrap-日期选择器未更改值

Question

你能帮帮我吗？

我使用 Vue.js + bootstrap-datepicker

如果我更改日期并单击“搜索”按钮，它不会更改为更改后的日期。

在我看来，bootstrap-datepicker 似乎使值保持不变。

如果您将其作为文本发送，它会发生变化。我该如何解决？

    <script>
export default{
    data() {
        return {
            queryField: {
                fromdate: "2019-01-01",
                todate: "2019-01-05"
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios
            .get("/api/test")
            .then(response => {
                this.data= response.data;
            })
            .catch(e => {
                console.log(e);
            });
            },
            searchData() {
                var queryFieldJson = JSON.stringify(this.queryField);

                //i want this variable is changed fromdate and todate
                //<input v-model="queryField.fromdate" id="date_picker"><button @click="searchData">search</button>
                //i want fromdate: '2019-01-02', todate: '2019-01-04'
            axios
            .get("/api/test/" + queryFieldJson")
            .then(response => {
                this.data= response.data;
            })
            .catch(e => {
                console.log(e);
            });
        }
    }
};
</script>

Answer 1

在 datepicker.I 中使用 v-model 不断更新数据，除了日历按钮外还显示了您的 fromdate 变量。请更新日期并检查。这里是fiddlelink。 https://jsfiddle.net/9oLwatq1/1/

 <div id="app">
  <datepicker></datepicker> 
  <br/>
  <br/>
  <br/>
  <br/>
</div>



 var datepickerComponent = Vue.extend({
  template: '<div class="input-group date" v-el:inputgroup>' +
    '<input type="text" class="form-control" v-model="queryField.fromdate"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>{{queryField.fromdate}}</span>' +
    '</div>',
  data:function(){
  return {

  };
  },
  ready: function() {
    $(this.$els.inputgroup).datepicker({
      format: 'yyyy/mm/dd',
      autoclose: true
    });
  }
});

Vue.component('datepicker', datepickerComponent);
new Vue({
  el: '#app'
  data: { 
     queryField: {
          fromdate: '2015-01-01'
      }
  },
});

vue.js bootstrap-日期选择器未更改值

vue.js bootstrap-datepicker not changed value

bootstrap-datepicker

vue.js