Vue

by Joe Cisneros

HTML

<div id="app">
  <table border="1">
      <thead>
          <tr>
            <th>Day/Time</th>
            <th v-for="day in days" width="50">Day {{ day }}</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, item_index) in itemList" :key="item.name">
            <td>{{ item.name }}</td>
            <td v-for="(day, day_index) in days" @click="alert(item_index, day_index)">Click</td>
          </tr>
      </tbody>
  </table>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  	days: [1,2,3,4,5],
    itemList: [
    	{
      	name: 'Apple'
      },
      {
      	name: 'Banana'
      },
      {
      	name: 'Carrot'
      }
    ]
  },
  methods: {
  	alert(item_index, day_index) {
    	let item = this.itemList[item_index];
      let day = this.days[day_index];
      
    	alert(item.name + ', Day ' + day);
    }
  }
})