Vue + Element UI : 데이터를 카드 구성 요소에 바인딩하는 방법?

Question

다음은 Element-UI 웹 사이트의 카드 구성 요소의 예입니다. 내 질문은 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, 환호!