O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Refactoring

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}}             </span>          </td>          <td>    ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required