[Vuejs]-Converting from handlebars to vue.js – using a pseduo root element

by

0👍

✅

If I understood your question, you may want something like this:

<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

Hope this helps.

Leave a comment