finished mock researcher profile

frontend/src/Apps/ResearcherProfile.vue

@@ -1,13 +1,18 @@
 <script setup>
+
+	 import {ref } from 'vue';
+	 const input = ref('')
+
+
 	 function inputKeyUp() {
-    let input, filter, ul, li, a, i, txtValue;
+		 let filter,ul,li,a,txtValue
-    input = document.getElementById('search-input');
 			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 (i = 0; i < li.length; i++) {
+			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) {
@@ -17,10 +22,9 @@
 				}
 			}
 		 }
+	 }
 
   const mydata = {
-    data() {
-        return {
           options: {
           theme: "light2",
           animationEnabled: true,
@@ -44,9 +48,7 @@
         },
         styleOptions: {
           width: "100%",
-          height: "360px"
+          height: "360px",
-        }
-      }
         }
       }
 
@@ -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>