I am currently working on creating a web-app using Vue JS. I have come across the concept of Single File components(.vue files) which seems like a great way to create components. However, I am looking to avoid using any node modules. That's when I discovered https://github.com/FranckFreiburger/http-vue-loader, which allows me to load .vue files directly from my html/js.
My goal is to display real-time data from a websocket into an html table that is located inside a component. I want to utilize the same websocket data for multiple components. To achieve this, I set up the websocket and a global variable outside the component (in app.js) to store the data. I then used this variable inside my component for real-time data updates. However, the html table is not updating despite receiving the data.
The concept is to establish a single websocket connection and share the data across multiple components.
As I am relatively new to the Vue framework, I appreciate any assistance in addressing this issue or suggestions for alternative approaches. Thank you.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>
<comp1></comp1>
<comp1></comp1>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/httpVueLoader.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var global_data = [];
var ws = new WebSocket("ws://127.0.0.1:9012/ws");
ws.onmessage = msg => {
global_data = JSON.parse(msg.data);
console.log(global_data);
};
new Vue({
el: "#app",
components: {
'comp1': httpVueLoader('js/component1.vue')
},
data: {
}
});
component1.vue
<template>
<div>
<table id="tm_table" class="content-table">
<thead>
<th>Parameter</th>
<th>Value</th>
</thead>
<tbody>
<tr v-for="(parameter, id) in rt_data.params" :key="id">
<td>{{parameter.param}}</td>
<td>{{parameter.value}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
module.exports = {
data() {
return {
rt_data: global_data,
};
}
};
</script>
<style>
</style>