One way to access each row is by using index:
<table border=1>
<tr v-for="row in Math.ceil(photos.length / 2)">
<td>
{{ photos[(row-1)*2] }}
</td>
<td v-if="photos[row*2]">
{{ photos[row*2] }}
</td>
</tr>
</table>
Another approach is to perform array calculations directly within the template:
<table border=1>
<tr v-for="row in Math.ceil(photos.length / 2)">
<td v-for="photo in photos.slice((row - 1)*2, row*2)">
{{ photo }}
</td>
</tr>
</table>
You could also simplify by creating a computed property:
<table border=1>
<tr v-for="photoRow in photoRows">
<td v-for="photo in photoRow">
{{ photo }}
</td>
</tr>
</table>
Check out the demo below for implementation details:
new Vue({
el: '#app',
data: {
photos: [
'photo 1',
'photo 2',
'photo 3',
'photo 4',
'photo 5'
]
},
computed: {
photoRows: function() {
return this.photos.reduce((photoRows, curr) => {
var perRow = 2;
var prev = photoRows.pop();
return photoRows.concat(prev.length >= perRow ? [prev, [curr]] : [prev.concat([curr])]);
}, [[]]);
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<table border=1>
<tr v-for="row in Math.ceil(photos.length / 2)">
<td>
{{ photos[(row-1)*2] }}
</td>
<td v-if="photos[row*2]">
{{ photos[row*2] }}
</td>
</tr>
</table>
<hr>
<table border=1>
<tr v-for="row in Math.ceil(photos.length / 2)">
<td v-for="photo in photos.slice((row - 1)*2, row*2)">
{{photo}}
</td>
</tr>
</table>
<hr>
<table border=1>
<tr v-for="photoRow in photoRows">
<td v-for="photo in photoRow">
{{photo}}
</td>
</tr>
</table>
</div>