Update record in 'onUpdated' in order to show saved additions

psychoinformatics-de · Feb 19, 2025 · acd36c6 · acd36c6
1 parent 3cca6e8
commit acd36c6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/src/components/BlankNodeViewer.vue b/src/components/BlankNodeViewer.vue
@@ -36,9 +36,9 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed, reactive, onBeforeMount, inject, toRaw} from 'vue'
+    import { reactive, onBeforeMount, inject, onUpdated} from 'vue'
     import { toCURIE, getSubjectTriples, makeReadable, getPrefLabel} from '../modules/utils';
-    import { RDF, DLTHINGS } from '@/modules/namespaces';
+    import { RDF } from '@/modules/namespaces';
     // Define component properties
     const props = defineProps({
         node: Object,
@@ -50,6 +50,14 @@
     const record = reactive({})
 
     onBeforeMount(() => {
+        updateRecord()
+    })
+
+    onUpdated(() => {
+        updateRecord()
+    })
+
+    function updateRecord() {
         record.relatedQuads = getSubjectTriples(graphData, props.node)
         record.prefLabel = getPrefLabel(props.node, graphData, allPrefixes)
         record.triples = {
@@ -60,26 +68,15 @@
         record.relatedQuads.forEach((rQ) => {
             addRecordProperty(rQ)
         })
-    })
-
-    onMounted(() => {
-    })
-
+    }
 
-    // const shapeAttributes = computed(() => {
-    // })
 
     function addRecordProperty(quad) {
         var termType = quad.object.termType
         if (!record.triples[termType].hasOwnProperty(quad.predicate.value)) {
             record.triples[termType][quad.predicate.value] = []
         }
         record.triples[termType][quad.predicate.value].push(quad.object)
-        // if (termType === "BlankNode") {
-        //     record.triples[termType][quad.predicate.value].push(quad.object)
-        // } else {
-        //     record.triples[termType][quad.predicate.value].push(quad.object.value)
-        // }
     }
     
 

diff --git a/src/components/NodeShapeViewer.vue b/src/components/NodeShapeViewer.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup>
-    import { ref, onMounted, computed, reactive, onBeforeMount, inject} from 'vue'
+    import { reactive, onBeforeMount, inject, onUpdated} from 'vue'
     import { toCURIE, getSubjectTriples, makeReadable, getPrefLabel} from '../modules/utils';
     import { RDF } from '@/modules/namespaces';
     // Define component properties
@@ -61,6 +61,14 @@
     const record = reactive({})
 
     onBeforeMount(() => {
+        updateRecord()
+    })
+
+    onUpdated(() => {
+        updateRecord()
+    })
+
+    function updateRecord() {
         record.title = props.quad.subject.value
         record.quad = props.quad
         record.value = props.quad.subject.value
@@ -75,25 +83,13 @@
         record.relatedQuads.forEach((rQ) => {
             addRecordProperty(rQ)
         })
-    })
-
-    onMounted(() => {
-    })
-
-
-    // const shapeAttributes = computed(() => {
-    // })
+    }
 
     function addRecordProperty(quad) {
         var termType = quad.object.termType
         if (!record.triples[termType].hasOwnProperty(quad.predicate.value)) {
             record.triples[termType][quad.predicate.value] = []
         }
         record.triples[termType][quad.predicate.value].push(quad.object)
-        // if (termType === "BlankNode") {
-        //     record.triples[termType][quad.predicate.value].push(quad.object)
-        // } else {
-        //     record.triples[termType][quad.predicate.value].push(quad.object.value)
-        // }
     }
 </script>