List Grid Part 2: Smooth Resize

by nevkatz

HTML

<script src="https://unpkg.com/vue@2"></script>

<!-- set the root -->
<div id="root">
   <input type="range" min="1" max="15" v-model.number="numCols"/>
    <input type="range" min="1" max="15" v-model.number="numRows"/>
   <div>
   <p>
   last clicked: {{ lastClicked }}
   </p>
    <p>
    number of rows: {{ numRows }}
    </p>
   <p>
    number of columns: {{ numCols }}
    </p>
 
   </div>
     <!-- widget for switching themes -->
    <table id="theme-switcher">
    <!-- using v-for to loop through array -->
    <!-- the template elemnts does not show up in the dom -->
    <template v-for="row in numRows">
    <!-- the v-for logic uses each item in the array to make a radio button -->
      <tr>
      <template v-for="cell in numCols">
        <td :data-row="row" :data-col="cell" @click="setCurrent"> 
        <label>{{ row }}-{{ cell }}</label>
       </td>
      </template>
    
      </tr>
      </template>
    </table>
    <!-- this is the markup that gets styled. -->
   
</div>

CSS

body {
  font-family: Arial;
}
table {
  border-collapse: collapse;
}
td {
  width: 30px;
  height: 30px;
  border: 1px solid grey;
  padding: 0px;
  font-size: 10px;
  position: relative;
  cursor: pointer;
}
td label {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
  color: grey;
}

JavaScript

function init() {
  //define a new vue that grabs onto the root element.
  let vm = new Vue({
    el:'#root',
    data: {
      numRows:5,
      numCols:5,
      lastClicked:"none",
      map:{
        grid:[]
      }
    },
    methods:{
      showAlert:function() {
         alert('alert!');
      },
      setCurrent:function(e) {
       let cell = e.currentTarget;
       let row_idx = cell.getAttribute('data-row');
       let cell_idx = cell.getAttribute('data-col');
       let cur = row_idx+'-'+cell_idx;
       
       this.lastClicked = cur;
       
      }
    }
   });
   // set the default as the first element.
}
init();