Vue + Element UI:如何将数据绑定到卡组件?

时间:2017-11-02 03:29:17

标签: vue.js vue-resource

以下是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'])
          }
        })
      }
   }

1 个答案:

答案 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,欢呼!!