List Grid Part 1: Working Variables

by nevkatz

HTML

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

<!-- set the root -->
<div id="root">
   <input value="5" type="range" min="1" max="10" v-model.number="numCells"/>
    <input value="5" type="range" min="1" max="100" v-model.number="numRows"/>
   <div>
    <p>
    number of rows: {{ numRows }}
    </p>
   <p>
    number of columns: {{ numCells }}
    </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 numCells">
        <td>  {{ row }}-{{ cell }}  </td>
      </template>
    
      </tr>
      </template>
    </table>
    <!-- this is the markup that gets styled. -->
   
</div>

CSS

body {
  font-family: Arial;
}

JavaScript

function init() {
  //define a new vue that grabs onto the root element.
  let vm = new Vue({
    el:'#root',
    data: {
      numRows:10,
      numCells:10,
    }
   });
   // set the default as the first element.
}
init();