從車把vue.js轉換 - 使用pseduo根元素

Question

我有以下車把模板：

{{#each this}} 
<tr> 
    <td colspan="2" class="respondent">Respondent #{{respondent_id}}</td> 
</tr> 
{{#each questions}} 
<tr> 
    <td>{{question}}</td> 
    <td>{{answers}}</td> 
</tr> 
{{/each}} 
{{/each}} 

我想嘗試Vue.js，但它不是很清楚，我從文檔怎麼辦這個。從本質上講，父列表的主要屬性爲1 <tr>，然後是問題屬性中每個問題的子列表<tr>。

對vue.js這樣做的建議？

Answer 1

如果我明白你的問題，你可能會想是這樣的：

<div id="demo"> 
    <table border="1"> 
    <template v-for="respondent in respondents"> 
     <tr> 
     <td colspan="2" class="respondent">Respondent #{{respondent.id}}</td> 
     </tr> 
     <tr v-for="q in respondent.questions"> 
     <td>{{q.question}}</td> 
     <td>{{q.answer}}</td> 
     </tr> 
    </template> 
    </table> 
</div> 

JS

new Vue({ 
    el: '#demo', 
    data: { 
    respondents: [ 
     { 
     id: 1, 
     questions: [ 
      { question: '1st Question (#1)', answer: '1st Answer (#1)' }, 
      { question: '2nd Question (#1)', answer: '2nd Answer (#1)' } 
     ] 
     }, 
     { 
     id: 2, 
     questions: [ 
      { question: '1st Question (#2)', answer: '1st Answer (#2)' }, 
      { question: '2nd Question (#2)', answer: '2nd Answer (#2)' } 
     ] 
     }, 
     { 
     id: 3, 
     questions: [ 
      { question: '1st Question (#3)', answer: '1st Answer (#3)' }, 
      { question: '2nd Question (#3)', answer: '2nd Answer (#3)' } 
     ] 
     } 
    ] 
    } 
}) 

http://codepen.io/pespantelis/pen/QjoLLK

希望這有助於。