JSFiddle - React, Tailwind, and code Playground

by Shashank Srivastava

HTML

<div id="app">
  <button @click="addRowset()">Add Rowset</button>
  <button @click="resetRowsets()">Reset Rowsets</button>
  <h2>Rowsets:</h2>
  <ol>
    <li v-for="(rowset, rowsetId) in rowsets">
      <h3>
        {{ rowsetId }}:
        <button @click="addRow(rowsetId)">Add Row</button>
        <button @click="resetRows(rowsetId)">Reset Rows</button>
      </h3>
      <ol>
        <li v-for="row in rowsets[rowsetId].rows">
          <label>id: {{ row.id }}</label>
        </li>
      </ol>
    </li>
  </ol>
</div>

Vue

function generateRows (length) {
	var rows = [];
  for (var i = 1; i <= length; i++) {
	 	rows.push({ id: Math.floor(Math.random() * 1000) });
  }
  return rows;
}

new Vue({
  el: "#app",
  data: {
    rowsets: {}
  },
  methods: {
    addRowset () {
    	var rowsetId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
      /* alternate 1: */
      Vue.set(this.rowsets, rowsetId, {});
      this.rowsets[rowsetId] = {
      	params: { url: 'some/url', filters: { a: 1, b: 2 } },
      };
      /* alternate 2: */
      /*
      var obj = {};
      obj[rowsetId] = {
      	params: { url: 'some/url', filters: { a: 1, b: 2 } },
      };
      // alternate 2.1:      
      this.rowsets = { ...this.rowsets, ...obj };
      // alternate 2.2:      
      // this.rowsets = Object.assign({}, this.rowsets, obj);
      */
      /* alternate 3: */
      /*
      var obj = JSON.parse(JSON.stringify(this.rowsets));
      obj[rowsetId] = {
      	params: { url: 'some/url', filters: { a: 1, b: 2 } },
      };
      this.rowsets = obj;
      */
    },
    resetRowsets () {
    	this.rowsets = {};
    },    
    addRow (rowsetId) {
    	if (!this.rowsets[rowsetId].rows) {
      	Vue.set(this.rowsets[rowsetId], 'rows', []);
      }
      /* alternate 1: */
      this.rowsets[rowsetId].rows.push(generateRows(1)[0]);
      /* alternate 2: */
      /*
      Vue.set(this.rowsets[rowsetId].rows, this.rowsets[rowsetId].rows.length, generateRows(1)[0]);
      */
      /* alternate 3: */
      /*
      this.rowsets[rowsetId].rows = [ ...this.rowsets[rowsetId].rows, generateRows(1)[0] ];
      */
      /* alternate 4: */
      /*
      var rows = JSON.parse(JSON.stringify(this.rowsets[rowsetId].rows));
    	rows[rows.length] = generateRows(1)[0];
    	this.rowsets[rowsetId].rows = rows;
      */
    },
    resetRows (rowsetId) {
    	if (this.rowsets[rowsetId].rows) {
      	this.rowsets[rowsetId].rows.splice(0);
      }
    },
  }
})