Javascript 通过Vue js更新html仪表板卡

我正在开发一个与Woocommerce REST API通信的Vue仪表板。我已经创建了一些仪表板卡片来显示当天的总订单和订单数量，还有一张卡片。 对于卡片，我有如下html代码：

总销售额
v-for=“totalsales，totalsales中的索引”>
总计-总计为：{{totalsales.Total_sales}

Vue js代码

//创建Vue指令
var app=新的Vue({
el:“#应用程序”，
数据：{
订单：[]
},
数据：{
totalsSales:[]
},
挂载：函数（）{
//第一次调用API
这是refreshData（）
//然后每分钟调用一次API
this.setIntervalId=setInterval（this.refreshData，60000）
//更新卡片
这个。getTotalSalesToday（）
},
方法：{
getTotalSalesToday（）{
axios.get（）https://staging.mysite.de/wp-json/wc/v3/reports/sales?date_min=2020-09-18&consumer\u key=123&consumer\u secret=123'）
.catch（错误=>{
console.log（错误）；
});
}
})

我只是得到了p标签内的文本，而不是值。我找不到我在这里做错了什么？

---

谢谢

我发现了一些可能导致问题的潜在问题：

作为斯芬克斯，在

标记中有一个输入错误

您在

data

中有

totalSales

，但在

v-for

中有

totalSales

您声明

数据

两次

如果您使用的是组件：“定义组件时，必须将数据声明为返回初始数据对象的函数”（）

您发布的代码不清楚如何填充

totalSales

。

refreshData

正在这样做吗？除非您设置了一个未发布的拦截器，

getTotalSalesToday

不会更新

totalSales

。您需要一个

。然后，

使用服务器的响应进行设置

totalSales

---

一个输入错误：

v-for=“totalsales，totalsales中的索引”>

应该是

谢谢你的回答。是的，我发现了错误。另外refreshData（）方法是获取html表的订单详细信息，我使用的是“数据：订单[]”