在Vue.js開發中,ElementUI是一個常用的UI組件庫。在使用ElementUI的過程中,我們有時需要接收從后端傳回的JSON數據。
首先,在Vue中需要使用Axios或者其他網絡請求庫來發送API請求獲取到JSON數據。然后,我們需要將獲取到的JSON數據傳遞到ElementUI的組件中進行渲染。
舉個例子,如果我們需要從后端獲取一個用戶列表的JSON數據,并在ElementUI的Table組件中進行渲染,我們可以按照以下步驟進行:
import axios from 'axios';
import { Table } from 'element-ui';
export default {
data() {
return {
userList: []
}
},
methods: {
getUserList() {
axios.get('/api/user/list').then(res =>{
this.userList = res.data;
});
}
},
mounted() {
this.getUserList();
},
components: {
'el-table': Table,
'el-table-column': Table.Column
},
template: ` `
}
以上是一個使用ElementUI的Table組件來渲染從后端獲取到的用戶列表的簡單例子。其中,我們先使用axios來發送API請求獲取到后端傳回的JSON數據,然后將獲取到的JSON數據賦值給data中的userList數組,再將userList作為數據傳遞給Table組件的data屬性中,即可通過Table組件將用戶列表渲染到頁面中。
總之,在使用ElementUI中接收JSON數據時,我們需要先獲取到JSON數據,然后將其作為數據傳遞給ElementUI組件中相應的屬性即可。
上一篇Vue distance
下一篇elk json