从车把转换为 vue.js - 使用伪根元素

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

希望对您有所帮助。

从车把转换为 vue.js - 使用伪根元素

Converting from handlebars to vue.js - using a pseduo root element

handlebars.js

vue.js