JSFiddle - React, Tailwind, and code Playground

by Travis Smith

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.2/cerulean/bootstrap.min.css">
<div id="app">

  <table class="table table-hover">
    <thead>
      <tr>
        <th>Question</th>
        <th>Input Type</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="question in uw_questions">
        <tr>
          <td>{{ question.text }}</td>
          <td>
            <select v-model="question.input_type" disabled>
              <option>Text</option>
              <option>Email</option>
              <option>Phone</option>
              <option>Number</option>
              <option>Select</option>
            </select>
          </td>
        </tr>
        <tr v-for="option in question.underwriting_question_options" :key="option.id" v-if="question.input_type === 'Select'">
          <td></td>
          <td>{{ option.text }}</td>
        </tr>
      </template> 
    </tbody>
  </table>
  
</div>

Vue

new Vue({
  el: "#app",
  data: {
    uw_questions: [
      { text: "Name", input_type: 'Text' },
      { text: "Class", input_type: 'Select',
      	underwriting_question_options: [
      		{ text: "I"}, { text: "II"}, { text: "III"}
      	]}
    ]
  }
})