Vue + Element UI: How to bind data to card component?

Question

Below is an example of card component from the Element-UI website. My question is how to bind data receive from API url?

   <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>

data received from api is in array type

export default {
  data() {...}
  return {
    ...
    hot_project_card: {
      fields: [{
        project_name: '',
        project_hot: '',
        ...
      }]
    },
  ...
  }

api provided by backend server

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

Answer 1

If i see correctly, you do not have to pass data to the el-row element. You can simply use what you have in your data attribute 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, cheers!!