Some more Feature list markup

src/components/Feature.vue

 <template>
 <ul style="list-style-type:none; padding:8px;">
   <template v-for="(child, name) in root">
-    <li><v-chip label outline color="blue darken-4">{{capitalize(underscore(name))}}</v-chip>
+    <li><v-chip label outline small color="blue darken-4">{{underscore(capitalize(name))}}</v-chip>
       <span v-if="isText(child)"> {{child._text}}</span>
       <ul v-if="isFeature(child)" style="list-style-type:none; padding:5px;">
         <li v-for="attr in child.feature">
           <span v-if="attr._attributes">
-            <v-chip label small>
+            <v-chip label small v-on:click.native="mark(attr.ref)">
               <span v-if="attr._attributes.category">Category: {{(attr._attributes.category)}}</span>
               <span v-if="attr._attributes.type">, Type: {{(attr._attributes.type)}}</span>
               <span v-if="attr._attributes.subtype">, Subtype: {{(attr._attributes.subtype)}}</span>
             </v-chip>
           </span>
           <span v-else-if="attr.category">
-            <v-chip label small>
+            <v-chip label small v-on:click.native="mark(attr.ref)">
               <span v-if="attr.category">Category: {{(attr.category)}}</span>
               <span v-if="attr.type">, Type: {{(attr.type)}}</span>
               <span v-if="attr.subtype">, Subtype: {{(attr.subtype)}}</span>
@@ -21,7 +21,7 @@
           </span>
           <span v-else>
             <v-chip label small>
-              {{attr}}
+              {{cutoff(attr)}}
             </v-chip>
           </span>
         </li>
@@ -41,13 +41,21 @@ export default {
     }
   },
   methods: {
+    mark (ref) {
+      // console.log(ref)
+    },
     capitalize (str) {
-      // Capitalize first letter of a String
+      str = String(str)
       return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() })
     },
     underscore (str) {
+      str = String(str)
       return str.replace(/_/g, ' ')
     },
+    cutoff (str) {
+      str = String(str)
+      return str.substr(0, 100)
+    },
     isAttribute (obj) {
       return Object.keys(obj)[0] === '_attributes'
     },
@@ -59,7 +67,6 @@ export default {
     },
     isLeaf (obj) {
       // Check if obj is a leaf in the tree
-      // let key = Object.keys(obj)[0]
       return this.isText(obj) || this.isFeature(obj) || this.isAttribute(obj)
     }
   },

src/components/Letter.vue

@@ -41,7 +41,7 @@
         <v-card-text>
           <ul style="list-style-type:none;" class="letter-text">
             <li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no">
-              {{ value._text }}
+              {{value._attributes.no }}: {{ value._text }}
             </li>
           </ul>
         </v-card-text>