finished mock researcher profile

frontend/src/Apps/ResearcherProfile.vue

@@ -1,26 +1,30 @@
 <script setup>
- function inputKeyUp() {
-    let input, filter, ul, li, a, i, txtValue;
-    input = document.getElementById('search-input');
-    filter = input.value.toUpperCase();
-    ul = document.getElementById("myUL");
-    li = ul.getElementsByTagName('li');
 
-    // Loop through all list items, and hide those who don't match the search query
-    for (i = 0; i < li.length; i++) {
-      a = li[i].getElementsByTagName("a")[0];
-      txtValue = a.textContent || a.innerText;
-      if (txtValue.toUpperCase().indexOf(filter) > -1) {
-        li[i].style.display = "";
-      } else {
-        li[i].style.display = "none";
-      }
-    }
-  }
+	 import {ref } from 'vue';
+	 const input = ref('')
+
+
+	 function inputKeyUp() {
+		 let filter,ul,li,a,txtValue
+			filter = input.value.toUpperCase();
+		 if(document.getElementById("myUL")!=null){
+			ul = document.getElementById("myUL");
+			li = ul.getElementsByTagName('li');
+
+			// Loop through all list items, and hide those who don't match the search query
+			for (let i = 0; i < li.length; i++) {
+				a = li[i].getElementsByTagName("a")[0];
+				txtValue = a.textContent || a.innerText;
+				if (txtValue.toUpperCase().indexOf(filter) > -1) {
+					li[i].style.display = "";
+				} else {
+					li[i].style.display = "none";
+				}
+			}
+		 }
+	 }
 
   const mydata = {
-    data() {
-        return {
           options: {
           theme: "light2",
           animationEnabled: true,
@@ -44,11 +48,9 @@
         },
         styleOptions: {
           width: "100%",
-          height: "360px"
+          height: "360px",
         }
       }
-    }
-  }
 
 </script>
 
@@ -102,13 +104,13 @@
     </select>
     </div>
     <div id="statsPie">
-			  <!--  <CanvasJSChart :options="mydata" @chart-ref="chartRef"/> !-->
+			  <CanvasJSChart :options="mydata.options" @chart-ref="chartRef"/> 
 
 
     </div>
   </div>
   <div id="articles">
-    <input type="text" id="search-input" @onkeyup="inputKeyUp" placeholder="search articles">
+    <input type="text" id="search-input" :onkeyup="inputKeyUp()" placeholder="search articles" v-model="input">
     <ul id="myUL">
       <li><a href="#">Adele</a></li>
       <li><a href="#">Agnes</a></li>