[Vuejs]-Vue.js adding dynamic input fields based on menu selection

by

0👍

Leverage v-model. Also define type and amount property for each row, and when the type is mc, then you display the amount select.

Notice: you don’t have to manipulate the DOM directly when you are using Vue.js, manipulate only data properties.

new Vue({
  el: "#app",
  data: {
    rows: []
  },
  methods: {
    addRow: function() {
      this.rows.push({
        title: "",
        type: "",
        amount: ""
      });
    },
    removeElement: function(index) {
      this.rows.splice(index, 1);
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <td><strong>Question</strong></td>
        <td><strong>Type</strong></td>
        <td><strong>Amount</strong></td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows">
        <td><input type="text" v-model="row.title"></td>
        <td>
          <select v-model="row.type">
            <option value="single">Single</option>
            <option value="multi">Mutlt</option>
            <option value="mc">MC</option>
          </select>
        </td>
        <td>
          <select v-show="row.type === 'mc'">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </td>
        <td>
        </td>
        <td>
          <button @click="removeElement(index)">Remove</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="button btn-primary" @click="addRow">Add row</button>
  </div>
</div>

Leave a comment