Vue.js table sample

Experimenting with Vue.js to do a filtered table

by John-Philip Johansson

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

  <button v-on:click="flipView">Flip view</button>

  <label for="belt">Belt</label>
  <select name="belt" v-model="selectedBelt">
    <option v-bind:value="null">All</option>
    <option v-for="b in beltNames" :key="b" v-bind:value="b">{{ b }}</option>
  </select>

  <span v-for="t in techniqueNames">
    <input type="checkbox" v-bind:id="t" v-bind:value="t" v-model="selectedTechniques" />
    <label v-bind:for="t" :key="t">{{ t }}</label>
  </span>

  <br>
  <span>Selected belt: {{ selectedBelt }}</span>
  <br>
  <span>Checked names: {{ selectedTechniques }}</span>
  <br>
  <span>Selected sort: {{ selectedSort }}</span>

  <div v-if="showCards">
    <div class="side-a">
      <p>Side A</p>
    </div>
    <div class="side-b">
      <p>Side B</p>
    </div>
  </div>

  <table v-if="showTable">
    <thead>
      <tr>
        <!--<th v-for="header in headers">{{ header }}</th>-->
        <th v-on:click="selectedSort='romaji'">Name</th>
        <th v-on:click="selectedSort='technique'">Technique</th>
        <th v-on:click="selectedSort='belt'">Belt</th>
        <th v-on:click="selectedSort='youtube'">URL</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="tech in techniques" :key="tech.romaji">
        <!--<td v-for="prop in tech">{{ prop }}</td>-->
        <td>{{ tech.romaji }}</td>
        <td>{{ tech.technique }}</td>
        <td>{{ tech.belt }}</td>
        <td><a v-bind:href="tech.youtube">YouTube</a></td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

var jdata = [{
  "romaji": "De Ashi Harai",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 1,
  "youtube": "https://www.youtube.com/watch?v=VFgPK3l5d9U&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g&index=1"
}, {
  "romaji": "Kouchi Gari",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 2,
  "youtube": "https://www.youtube.com/watch?v=-SuAzlYzpJk&index=2&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g"
}, {
  "romaji": "Ouchi Gari",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 3,
  "youtube": "https://www.youtube.com/watch?v=6OxoWzpwezo&index=3&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g"
}, {
  "romaji": "Uki Goshi",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 4,
  "youtube": "https://www.youtube.com/watch?v=dFXK9plNIss&index=4&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g"
}, {
  "romaji": "O Goshi",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 5,
  "youtube": "https://www.youtube.com/watch?v=GDWtRtJ23cM&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g&index=5"
}, {
  "romaji": "Tsuri Goshi",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 6,
  "youtube": "https://www.youtube.com/watch?v=OLqryPZyUuA&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g&index=6"
}, {
  "romaji": "Osoto Gari",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 7,
  "youtube": "https://www.youtube.com/watch?v=1JL1Hw7M3cU&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g&index=7"
}, {
  "romaji": "Kubi-Nage",
  "technique": "Nage waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 8,
  "youtube": "https://www.youtube.com/watch?v=K_jPo0y2450&list=PLkgloM3XaRGhCDMRLsBbRiVaILQ2u44_g&index=8"
}, {
  "romaji": "hon kesa gatame",
  "technique": "Ne waza",
  "belt": "Yellow",
  "rank": "5 kyu",
  "order": 1,
  "youtube": ""
}, {
  "romaji": "makura kesa gatame",
  "technique": "Ne waza",
  "belt": "Yellow",
  "rank": "5 kyu",
...