Handlebars.js 使用psedoo根元素将把手转换为vue.js

我有以下把手模板：

{{#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，然后是questions属性中每个问题的子列表

---

关于使用vue.js执行此操作的建议？

如果我理解您的问题，您可能会想要以下内容：

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

希望这有帮助。

是的，我自己刚刚发现了元素，回来回答我自己的问题。看来你得到了荣誉

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