使用vue,网页从后台拿到数据之后,如何让动态更新tableData
时间: 2023-02-16 17:32:23 浏览: 114
使用 Vue,在拿到数据之后更新 tableData 的方法如下:
1. 在 Vue 的 data 中声明一个变量 tableData,用于存储表格数据:
```
data() {
return {
tableData: []
}
}
```
2. 在 mounted 或 created 生命周期中从后台获取数据:
```
mounted() {
this.getTableData()
},
methods: {
getTableData() {
// 从后台获取数据
axios.get('/api/table-data').then(response => {
// 将获取的数据更新到 tableData 中
this.tableData = response.data
})
}
}
```
3. 在模板中使用 v-for 指令遍历 tableData 渲染表格:
```
<table>
<tr v-for="item in tableData">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
```
这样,当数据更新时,表格也会自动更新。
阅读全文