Currently, I am in the process of developing a Vue dashboard that communicates with the Woocommerce REST API. Within this dashboard, I have implemented several cards that display information such as the total orders for the day and order count. Below is an example of the HTML code for these cards:
<div class="dashbord dashbord-red">
<div class="icon-section">
<small>Total Sales</small>
<p> v-for="totalsales, index in totalSales">
Total - Total is: {{ totalsales.total_sales }}</p>
</div>
</div>
Included above is the Vue js code snippet as well.
// creating Vue instnce
var app = new Vue({
el: '#app',
data: {
orders: []
},
data: {
totalsSales: []
},
mounted: function () {
// Call the API the first time
this.refreshData()
// Then call the API every minute
this.setIntervalId = setInterval(this.refreshData, 60000)
// Updating cards
this.getTotalSalesToday()
},
methods: {
getTotalSalesToday() {
axios.get('https://staging.mysite.de/wp-json/wc/v3/reports/sales?date_min=2020-09-18&consumer_key=123&consumer_secret=123')
.catch(error => {
console.log(error);
});
}
})
However, my concern lies in the fact that I am only able to retrieve the text within the p tag, rather than the actual value. I am struggling to identify where things are going wrong in my implementation. Your insights would be greatly appreciated. Thank you!