JSFiddle - React, Tailwind, and code Playground

by Leo Cavalcante

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<table id="demo">
  <tr>
    <td>X</td>
    <td>Y</td>
    <td>Z = X * Y</td>
  </tr>
  <tr>
    <td><input type="text" v-model='xin1'></td>
    <td><input type="text" v-model='xin2'></td>
    <td><input type="text" v-model='xin3'></td>
  </tr>
  <tr>
    <td><input type="text" v-model='yin1'></td>
    <td><input type="text" v-model='yin2'></td>
    <td><input type="text" v-model='yin3'></td>
  </tr>
  <tr>
    <td><input type="text" v-model='zin1'></td>
    <td><input type="text" v-model='zin2'></td>
    <td><input type="text" v-model='zin3'></td>
  </tr>
</table>

JavaScript

inputs = ['in1', 'in2', 'in3'];  //I have an array with inputs

inputX = [];
inputY = [];
inputZ = [];
initEl = {};
computedEl = {};

for(i=0; i< inputs.length; i++){
	inputX[i] = 'x' + inputs[i];  // fill new array x input
	inputY[i] = 'y' + inputs[i];  // fill new array y input
  inputZ[i] = 'z' + inputs[i];  // fill new array z input
  
  initEl[inputX[i]] = 0; // init data
  initEl[inputY[i]] = 0; // init data
  initEl[inputZ[i]] = 0; // init data
  
  // try to computed dynamically
  computedEl[inputZ[i]] = (function () {
      return this[inputX[i]] * this[inputY[i]];  
    }).bind(initEl);
 }
 
   var _loop = function (i) {
    computedEl[inputZ[i]] = (function () {
      return this[inputX[i]] * this[inputY[i]];
    }).bind(initEl);
  };
  
  for (var i = 1; i <= inputs.length; i++) {
    _loop(i);
  }

console.log(initEl);
console.log(computedEl);

var vm = new Vue({
	el: '#demo',
  data: initEl,
  computed: computedEl
})