Vue + Element UI：データをカードコンポーネントにバインドする方法は？

Question

以下は、Element-UI Webサイトのカードコンポーネントの例です。私の質問は、API urlからデータを受け取る方法をバインドすることですか？ 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> 

データが受信

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

私が正しく表示された場合、あなたはel-row要素にデータを渡す必要はありません

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

バックエンドサーバが提供するAPI 。あなたは、単に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、歓声!!