VueJS table example

Add, edit rows

by Константин Дралюк

HTML

<div id="tableApp">
  <table>
    <thead>
      <tr>
        <th v-for="(field, index) in form.fields">
          {{ field.title }}
        </th>
        <th>Manage</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in table" :key="index">
        <td v-for="(value, key, index) in row">
          {{ value }}
        </td>
        <td>
          <button @click="editRow(index)">edit</button>
          <button @click="removeRow(index)">x</button>
        </td>
      </tr>
      <tr class="manage">
        <td v-for="field in form.fields">
          <template v-if="field.type === 'select'">
            <select v-model="field.value">
              <option v-for="option in field.options" :value="option">
                {{ option }}
              </option>
            </select>
          </template>
          <template v-else-if="field.type === 'text'">
            <input type="text" v-model="field.value">
          </template>
          <template v-else-if="field.type === 'number'">
            <input type="number" v-model="field.value">
          </template>
        </td>
        <td>
          <button @click="addRow()" v-if="form.editIndex === null">+</button>
          <template v-else>
            <button @click="updateRow(form.editIndex)">save</button>
            <button @click="clear()">x</button>
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

table {
  margin: 15px 0 20px;
  width: 100%;
}

td,
th {
  padding: 5px;
  border: 1px solid #888;
  width: 20%;
}

input,
select {
  width: 100%;
}

.manage {
  background: #8be;
}

JavaScript

new Vue({
  el: '#tableApp',

  data: {
    form: {
      fields: {
        title: {
          title: 'Title',
          type: 'text',
          value: '',
        },
        type: {
          title: 'Type',
          type: 'select',
          options: ['fruit', 'vegetable'],
          value: '',
        },
        amount: {
          title: 'Amount',
          type: 'number',
          value: '',
        },
        manufacter: {
          title: 'Manufacter',
          type: 'select',
          options: ['India', 'Egypt', 'Turkey'],
          value: '',
        },
      },
      editIndex: null,
    },
    table: [{
      title: 'Lemon',
      type: 'fruit',
      amount: 50,
      manufacter: 'Egypt'
    }, {
      title: 'Orange',
      type: 'fruit',
      amount: 10,
      manufacter: 'India'
    }, {
      title: 'Strawberry',
      type: 'fruit',
      amount: 80,
      manufacter: 'Turkey'
    }, {
      title: 'Potato',
      type: 'vegetable',
      amount: 300,
      manufacter: 'Egypt'
    }, {
      title: 'Tomato',
      type: 'vegetable',
      amount: 150,
      manufacter: 'Turkey'
    }],
  },

  methods: {
    validate: function() {
      var fields = this.form.fields;
      var statement = true;

      for (var field in fields) {
        if (!fields[field].value) {
          statement = false;
        }
      }

      return statement;
    },

    clear: function() {
      var fields = this.form.fields;

      this.form.editIndex = null;

      for (var field in fields) {
        fields[field].value = '';
      }
    },

    addRow: function() {
      if (this.validate()) {
        var fields = this.form.fields;
        var rowObject = {};

        for (var field in fields) {
          rowObject[field] = fields[field].value;
        }

        this.table.push(rowObject);

        this.clear();
      }
    },

    removeRow: function(index) {
      this.table.splice(index, 1);
    },

    editRow: function(index) {
      var fields =...