Vue Component Experiment

by glauderdale

HTML

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

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" v-bind:class="header.class">
          {{ header.id }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td v-for="(value,index) in item">
          {{ item[index] }}
        </td>
        <td>
          LINK
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" v-bind:class="header.class">
          {{ header.id }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in available">
        <td>
          {{ item.id}}
        </td>
        <td>
          {{ item.order }}
        </td>
        <td>
          {{ item.text }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    headers: [{
        id: 'Header One',
        class: 'red'
      },
      {
        id: 'Header Two',
        class: 'blue'
      },
      {
        id: 'Header Three',
        class: 'green'
      },
      {
      id:'Links'
      }
    ],
    items: [{
        id: 'First Item',
        order: 1,
        text: 'Banana'
      },
      {text: 'Orange',
        id: 'Second Item',
        order: 2
        
      },
      {
        id: 'Third Item',
        order: 3,
        text: 'Pineapple'
      }
    ],
    available: [{
        id: 'Fourth Item',
        order: 4,
        text: 'Kiwi'
      },
      {
        id: 'Fifth Item',
        order: 5,
        text: 'Grape'
      },
      {
        id: 'Sixth Item',
        order: 6,
        text: 'Apple'
      }
    ]
  }
})