以下是Element-UI网站的卡组件示例。我的问题是如何从API网址绑定数据接收?
<el-row :data="hot_project_card"> //data binding -- is this correct?
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;">
<span>Yummy hamburger</span>
<template scope="scope"> {{ scope.project_name }} </template> // code is not working
</div>
</el-card>
</el-col>
</el-row>
从api收到的数据是数组类型
export default {
data() {...}
return {
...
hot_project_card: {
fields: [{
project_name: '',
project_hot: '',
...
}]
},
...
}
后端服务器提供的api
method(): {
project_card_display () {
this.$http.get('http://127.0.0.1:8000/api/project_card_display').then((response) => {
var res = JSON.parse(response.bodyText)
console.log(res)
if (res.error_num === 0) {
this.hot_project_card = res['list'] // data recevied from backend server is saved to hot_project_card
} else {
this.$message.error('retrieved error"')
console.log(res['msg'])
}
})
}
}
答案 0 :(得分:0)
如果我看得正确,您不必将数据传递给el-row
元素。您只需使用数据属性hot_project_card
中的内容:
<el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;">
<div v-for="field in hot_project_card.fields">
<h4>{{ field.project_name }}</h4>
<p>{{ field.project_hot }}</p>
...
</div>
</div>
</el-card>
</el-col>
</el-row>
HTH,欢呼!!