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，但我从文档中不清楚如何做到这一点。从本质上讲，父列表的主要属性为<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 - 使用pseduo根元素

1 个答案: