Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/370.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 根据Vue.js中的HTML选择月份和年份获取API响应_Javascript_Html_Vue.js_Woocommerce - Fatal编程技术网

Javascript 根据Vue.js中的HTML选择月份和年份获取API响应

Javascript 根据Vue.js中的HTML选择月份和年份获取API响应,javascript,html,vue.js,woocommerce,Javascript,Html,Vue.js,Woocommerce,我正在尝试根据一年中选定的月份获得API响应。我面临的问题是,当用户更改月份时,数组将以相同的响应进行更新。我试图使HTML表动态化,因为我在其中显示API响应。我正在运行按钮函数内部的Vue代码 下面是我的HTML代码 <input id="bday-month" type="month" name="bday-month" value="2020-09"> <button type="

我正在尝试根据一年中选定的月份获得API响应。我面临的问题是,当用户更改月份时,数组将以相同的响应进行更新。我试图使HTML表动态化,因为我在其中显示API响应。我正在运行按钮函数内部的Vue代码

下面是我的HTML代码

<input id="bday-month" type="month" name="bday-month" value="2020-09">
<button type="button" class="btn btn-primary" id="getmonth">Get Month</button>
<p hidden id = "print"></p>
const input = document.querySelector('input');
 const getDate = document.getElementById('print');
 input.addEventListener('input', updateValue);
    
       function updateValue(e) {
  getDate.textContent = e.target.value;
       }

$(document).on('click', '#getmonth', function(){ 
    var copystr = document.getElementById('print').textContent;
    
    // Get after date to ISO according to user selection
    var fullstr = copystr + "-01";
    var date1 = new Date(fullstr);
    date1.setHours(2, 0, 0, 0);
    var convertdate = date1.toISOString();
    console.log("After date " + convertdate);
    
    // Get before date to ISO according to user selection
    var beforedate = new Date(date1.getFullYear(), date1.getMonth() + 1, 0);
    beforedate.setHours(23, 59, 0, 0);
    var convertbeforedate = beforedate.toISOString();
    console.log("Before date " + convertbeforedate);

// Vue
var app = new Vue({
    el: '#app',
    data: {
      orders: [], 
    },
    
mounted: function() {
  // Call the API the first time
  this.refreshData()
 },

methods: {
    // Extract refresh logic into a method
  refreshData () {
      
    // Retrieving first 100 records
    axios.get('https://staging/wp-json/wc/v3/orders?per_page=10&consumer_key=123&consumer_secret=456', {
        params: {
            after: convertdate
        },
        params: {
            before: convertbeforedate
        }
        
    })
    .then(response => {
     orders: [];
     this.orders = response.data;
      console.log(response);
      /* Retrieving second 100 records
      return axios.get('https://staging/wp-json/wc/v3/orders?per_page=100&offset=100&consumer_key=123&consumer_secret=456', {
        params: {
            after: isoConvert
        }
    });
    
     })
    .then(response => {
    // Using concat method to replace the naew array to existing array to get append results in one array -- Here push method is not working
      var new_array = response.data;
      this.orders = this.orders.concat(new_array);
      console.log('Second 100 records')
      console.log(response);
       .catch(error => {
     console.log(error);
      
    });
  }
}
  });
});