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中使用v-model不断更新。除了日历按钮，我还显示了fromdate变量。请更新日期并检查。这是小提琴的链接。 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-datepicker的值未更改

1 个答案: