modularize items

web/src/App.vue

@@ -8,12 +8,7 @@
             :key="key"
           >{{value}}</th>
         </tr>
-        <tr v-for="(row,rowKey) in json.data" :key="rowKey">
+        <Item v-for="(row,rowKey) in json.data" :key=rowKey :data=row :hidden=json.hidden></Item>
-          <td
-            v-for="(value,key) in row.filter((val,ind)=>!json.hidden.includes(ind))"
-            :key="key"
-          >{{value}}</td>
-        </tr>
       </table>
     </div>
     <br />
@@ -27,6 +22,8 @@
 </template>
 
 <script>
+import {Item} from "./Item";
+
 export default {
   name: "App",
   data() {
@@ -39,7 +36,8 @@ export default {
     fetch("?json")
       .then(res => res.json())
       .then(json => (self.json = json));
-  }
+  },
+  components: [Item]
 };
 </script>
 

web/src/Item.vue

@@ -0,0 +1,21 @@
+<template>
+  <tr id="item">
+    <td
+      v-for="(value,key) in data.filter((val,ind)=>!hidden.includes(ind))"
+      :key="key"
+    >{{value}}</td>
+  </tr>
+</template>
+
+<script>
+export default {
+  name: "Item",
+  properties: {
+    data: Object,
+    hidden: Array
+  }
+};
+</script>
+
+<style scoped>
+</style>