在Vue 2中从对象数组创建组件

Question

我一直试图从一组对象中创建多个组件。

应用程序应该做的是遍历一系列答案，并为每个答案吐出一个单一答案组件。它目前没有，但我在控制台中没有收到任何错误消息。

new Vue({
  el: '#quiz',
  data: {
    question: 'Which answer is the correct one?',
    answers: [
      {text: 'This one', correct: true},
      {text: 'Or this one', correct: false}
    ]
  }
});

Vue.component('single-answer', {
  props: ['answer'],
  template: '<div>{{ answer.text }}</div>'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="quiz">
  <h3>{{ question }}</h3>
  <single-answer v-for="(answer, index) in answers" :answer="answer" :key="index"></single-answer>
</div>