<tr v-for="(page, index) in $pages.getAllPages()" :key="index" >

 

NOTE: you put the key in the tr tag.

I am a Rect developer learning VueJs and today I learned how to loop through object arrays in VueJS:

Data:

[{
  "link": {"text": "Home", "url": "index.html"},
  "pageTitle": "Home Page",
  "content": "This is the home page"
},
{
  "link": {"text": "About", "url": "about.html"},
  "pageTitle": "About Page",
  "content": "This is the about page"
},
{
  "link": {"text": "Contact", "url": "contact.html"},
  "pageTitle": "Contact Page",
  "content": "This is the contact page"
}]

 

Template:

<template>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Title</th>
                <th>Link Text</th>
                <th>Is Published</th>
            </tr>
        </thead>
        <tbody>
            <tr
                v-for="(page, index) in $pages.getAllPages()"
                :key="index"
                @click="goToPage(index)"
            >
                <td>{{page.pageTitle}}</td>
                <td>{{page.link.text}}</td>
                <td>{{page.published ? 'yes' : 'no'}}</td>
            </tr>
        </tbody>
    </table>

 

1GNsWa_EZdw