JSFiddle - React, Tailwind, and code Playground

by bikeshedder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="main">
  <div v-for="question in questions">
    {{ question.text }}
    <select v-model="question.answer">
      <option v-for="choice in question.choices":value="choice.value">{{ choice.text }}</option>
    </select>
  </div>
  
  <dl>
   <dt>A</dt><dd>{{ counts.a }}</dd>
   <dt>B</dt><dd>{{ counts.b }}</dd>
  </dl>
</div>

JavaScript

var questions = [
	{
  	'text': 'What?',
    'choices': [
    	{
      	'value': 'a',
        'text': 'Bread',
      },
      {
      	'value': 'b',
        'text': 'Butter',
      },
    ],
    answer: null,
  },
  {
  	'text': 'How?',
    'choices': [
    	{
      	'value': 'a',
        'text': 'Good',
      },
      {
      	'value': 'b',
        'text': 'Well',
      },
    ],
    answer: null,
  },
];

new Vue({
  el: '#main',
	data: {
  	questions: questions,
  },
	computed: {
  	counts: function() {
        var counts = {};
        this.questions.forEach(q => {
            counts[q.answer] = (counts[q.answer] || 0) + 1;
        });
        return counts;
    },
  },
});