Having large amounts of code in our text editor can be confusing if not displayed properly, as well as in the browser. For that reason, we are going to refactor our example code, to render the list of stories using a <table>
element instead of <ul>
:
<div id="app"> <table class="table table-striped"> <tr> <th>#</th> <th>Plot</th> <th>Writer</th> <th>Upvotes</th> <th>Actions</th> </tr> <story v-for="story in stories" :story="story"> </story> </table> <template id="template-story-raw"> <tr> <td> {{story.id}} </td> <td> <span> {{story.plot}} ...