Javascript 根据Vue.js中的HTML选择月份和年份获取API响应
我正在尝试根据一年中选定的月份获得API响应。我面临的问题是,当用户更改月份时,数组将以相同的响应进行更新。我试图使HTML表动态化,因为我在其中显示API响应。我正在运行按钮函数内部的Vue代码 下面是我的HTML代码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="
<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);
});
}
}
});
});