List Grid Part 3: Toggle Cells

by nevkatz

HTML

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

<!-- set the root -->
<div id="root">
   <div>

   <input id="numCols" type="range" min="1" max="15" v-model.number="numCols"/>
     <label for="numCols">Columns: {{ numCols }} </label>

   </div>
   <div>

   <input type="range" min="1" max="15" v-model.number="numRows"/>
      <label for="numRows">Rows: {{ numRows }}</label>
   </div>
   <div>
   <p>
   last clicked: {{ lastClicked }}
   </p>
   </div>
    <table id="theme-switcher">
    <template v-for="row in numRows">
      <tr>
      <template v-for="cell in numCols">
        <td data-type="floor" :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;

  padding: 0px;
  font-size: 10px;
  position: relative;
  cursor: pointer;
  border: 1px solid grey;
  background-clip: padding-box;
  background-color: lightgrey;
  color: grey;
  
}
td[data-type="wall"] {
  background-color: navy;
  color: white;
}
td label {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
  
  border-width: 0px;
}
input[type="range"] {
  position: relative;
  top: 6px;
}

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;
       
       let dataType = cell.getAttribute('data-type');
     	
       if (dataType == 'wall') {
          cell.setAttribute('data-type','floor');
          console.log('floor');
       }
       else {
          cell.setAttribute('data-type','wall');
          console.log('wall');
   
       }
 
       
      }
    }
   });
   // set the default as the first element.
}
init();