Vue + Element UI: 如何给卡片组件绑定数据？

Question

下面是来自 Element-UI 网站的卡片组件示例。我的问题是如何绑定从 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>

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

Answer 1

如果我没看错的话，您不必将数据传递给 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，干杯！！

Vue + Element UI: 如何给卡片组件绑定数据？

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

vue.js

vue-resource