Vue Template Two cols

by Ben Clayton

HTML

<div id="app">
 
  <hr>
  <table>
    <template v-for="(idx) in colorsIdxs">
			<tr>
        <td>{{colors[idx]}}</td>
        <td>{{colors[idx+1] | '&nbsp;'}}</td>
      </tr>
    </template>
  </table>
<hr>

CSS

body {
  padding: 30px;
}

td {
  border: 1px solid red;
  padding: 3px;
}

Vue

new Vue({
  el: "#app",
  data: {
     colors:['red','green','blue','black','yellow','red','green','blue','black']
  },
  methods: {
  },
	computed: {
		colorsIdxs : function(){
			var arr = [];
			for (var i=0; i < this.colors.length; i=i+2){
				arr.push(i);
			}
			return arr
		}
	}
})

/// luke 1:26-35