index item's occurences well diplayed & links are functioning

assets/css/app.scss

@@ -219,7 +219,7 @@ section[role="main-content"]{
   .index{
   }
 
-  #nominum{
+  .index-item{
     header{
       h1{
         @include title2black;

src/components/Content/IndexItemOcurrences.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="occurences">
+    <ul>
+      <li
+        v-for="ed in content.occurences"
+        :key="ed.item"
+      >
+        <h3>
+          <a
+            :href="'/edition/'+ed.item"
+            :uuid="ed.item"
+            @click.prevent="onclick"
+            @keyup.enter="onclick"
+          >
+            {{ ed.item }}
+          </a>
+        </h3>
+        <ul>
+          <li
+            v-for="oc in ocAsArray(ed.occurences)"
+            :key="oc.uuid"
+          >
+          <!-- <li
+            v-for="oc in ed.occurences"
+            :key="oc.uuid"
+          > -->
+            <h4>
+              <a
+                :href="'/edition/'+ed.item+'/'+oc.uuid"
+                :uuid="oc.uuid"
+                :eduuid="ed.item"
+                @click.prevent="onclick"
+                @keyup.enter="onclick"
+              >
+                {{ oc.title }}
+              </a>
+            </h4>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'IndexItemOcurrences',
+  props: {
+    content: Object
+  },
+  data: () => ({
+
+  }),
+  methods: {
+    ocAsArray (oc) {
+      console.log('Array.isArray(oc)', Array.isArray(oc))
+      return Array.isArray(oc) ? oc : [oc]
+    },
+    onclick (e) {
+      console.log('clicked on text occurence', e)
+      if (e.target.getAttribute('eduuid')) {
+        this.$router.push({
+          name: `editiontext`,
+          params: {
+            id: e.target.getAttribute('eduuid'),
+            textid: e.target.getAttribute('uuid')
+          }
+        })
+      } else {
+        this.$router.push({
+          name: `edition`,
+          params: {
+            id: e.target.getAttribute('uuid')
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Locorum.vue

@@ -1,12 +1,19 @@
 <template>
-  <MainContentLayout id="locorum">
-    <template v-slot:header>
-      <h1 v-if="content">{{ content.title }}</h1>
-      <p v-if="content">{{ content.type }}</p>
-      <span v-if="!content">Loading ...</span>
+  <MainContentLayout id="locorum" class="index-item">
+    <template v-if="!content" v-slot:header>
+      <span class="loading">Loading ...</span>
     </template>
 
-    <template v-slot:nav />
+    <template v-if="content" v-slot:header>
+      <h1>{{ content.title }}</h1>
+      <p>
+        {{ content.type }}
+      </p>
+    </template>
+
+    <!-- default slot -->
+    <IndexItemOcurrences v-if="content" :content="content" />
+
   </MainContentLayout>
 </template>
 
@@ -14,15 +21,19 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
+import IndexItemOcurrences from '../components/Content/IndexItemOcurrences'
 
 export default {
   name: 'Locorum',
   components: {
-    MainContentLayout
+    MainContentLayout,
+    IndexItemOcurrences
   },
   data: () => ({
     content: null
   }),
+  computed: {
+  },
   beforeCreate () {
     console.log('locorum this.$route', this.$route)
     REST.get(`/indexLocorum/` + this.$route.params.id, {})

src/pages/Nominum.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainContentLayout id="nominum">
+  <MainContentLayout id="nominum" class="index-item">
     <template v-if="!content" v-slot:header>
       <span class="loading">Loading ...</span>
     </template>
@@ -13,45 +13,8 @@
     </template>
 
     <!-- default slot -->
-    <section class="occurences">
-      <ul>
-        <li
-          v-for="ed in content.occurences"
-          :key="ed.item"
-        >
-          <h3>
-            <a
-              :href="'/edition/'+ed.item"
-              :uuid="ed.item"
-              @click.prevent="onclick"
-              @keyup.enter="onclick"
-            >
-              {{ ed.item }}
-            </a>
-          </h3>
-          <ul >
-            <li
-              v-for="oc in ed.occurences"
-              :key="oc.uuid"
-            >
-              <h4>
-                <a
-                  :href="'/edition/'+ed.item+'/'+oc.uuid"
-                  :uuid="oc.uuid"
-                  :eduuid="ed.item"
-                  @click.prevent="onclick"
-                  @keyup.enter="onclick"
-                >
-                  {{ oc.title }}
-                </a>
-              </h4>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </section>
+    <IndexItemOcurrences v-if="content" :content="content" />
 
-    <template v-slot:nav />
   </MainContentLayout>
 </template>
 
@@ -59,11 +22,13 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
+import IndexItemOcurrences from '../components/Content/IndexItemOcurrences'
 
 export default {
   name: 'Nominum',
   components: {
-    MainContentLayout
+    MainContentLayout,
+    IndexItemOcurrences
   },
   data: () => ({
     content: null
@@ -81,27 +46,6 @@ export default {
         console.warn('Issue with nominum', error)
         Promise.reject(error)
       })
-  },
-  methods: {
-    onclick (e) {
-      console.log('clicked on nominum text occurence', e)
-      if (e.target.getAttribute('eduuid')) {
-        this.$router.push({
-          name: `editiontext`,
-          params: {
-            id: e.target.getAttribute('eduuid'),
-            textid: e.target.getAttribute('uuid')
-          }
-        })
-      } else {
-        this.$router.push({
-          name: `edition`,
-          params: {
-            id: e.target.getAttribute('uuid')
-          }
-        })
-      }
-    }
   }
 }
 </script>

src/pages/Operum.vue

@@ -1,11 +1,16 @@
 <template>
-  <MainContentLayout id="operum">
-    <template v-slot:header>
-      <h1 v-if="content">{{ content.title }}</h1>
-      <span v-if="!content">Loading ...</span>
+  <MainContentLayout id="operum" class="index-item">
+    <template v-if="!content" v-slot:header>
+      <span class="loading">Loading ...</span>
     </template>
 
-    <template v-slot:nav />
+    <template v-if="content" v-slot:header>
+      <h1>{{ content.title }}</h1>
+    </template>
+
+    <!-- default slot -->
+    <IndexItemOcurrences v-if="content" :content="content" />
+
   </MainContentLayout>
 </template>
 
@@ -13,11 +18,13 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
+import IndexItemOcurrences from '../components/Content/IndexItemOcurrences'
 
 export default {
   name: 'Operum',
   components: {
-    MainContentLayout
+    MainContentLayout,
+    IndexItemOcurrences
   },
   data: () => ({
     content: null