Vue 2.0 Hello World

by RomainMazB

HTML

<div id="app">
  <table class="table w-full">
  <thead>
    <tr>
      <th></th>
      <th v-for="(day, index) in daysArray">
        {{ day }}
     </th>
   </tr>
  </thead>

  <tbody>
    <tr v-for="(times, index) in timesArray" :key="index">
      <td>{{ times.key }}</td>
      <td v-for="(day) in times.days">
        <input type="checkbox" v-bind:id="times.key.days" :value="times" v-model="selectedTimesArray">
     </td>
   </tr>
  </tbody>
</table>
</div>

CSS

.wrapper {
  max-width: 350px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.child {
  display: none;
}

.showChild {
  display: block
}

JavaScript

new Vue({
  el: '#app',
  data: {
    daysArray: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    timesArray: [
      {
        key: '10:00 - 10:30',
        days: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
      },
      {
        key: '10:30 - 11:00',
        days: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
      }
    ],
    selectedTimesArray: []
  },
  watch: {
  	selectedTimesArray() {
    	console.table(this.selectedTimesArray);
    }
  }
})