I have a Vue component called "Logs" which I use to monitor changes in my log file; this is an attempt to prevent manually checking the file.
Said log file is rightly named log.txt and its loaded somewhere in my site.
The first challenge was actually reading the file in my component to which raw-loaded came to the rescue. see the same code below:
<script>
import logs from '!!raw-loader!log.txt';
export default {
data: function(){
return {
log: "" //log is empty
}
},
mounted: function(){
this.getLog();
},
methods: {
getLog() {
this.log = logs;
}
}
}
</script>
The code above is self-explanatory; where the component is mounted, the getLogs
method is called and the file is read and the variable is set appropriately. This works just fine as I get the desired output in the template.
{{ logs }}
My dilemma now is that I want to be able to update the actual log.txt file (I manually edit it for right now but will be automated), and when I click on a button, see the updated value.
What I've tried to
Create a button that calls this.getLog in the template... but when I click on it, it loads the exact same data without the update
I've also tried to import the file on demand
getLog: function(){ import('!!raw-loader!ZCRMClientLibrary.log').then(function(log){ this.logs = log.default; console.log( log.default ); // use my library here or call a method that uses it }.bind(this)); },
Well this doesn't work either. I see the update made to file after I refresh.
I think the solution will be to load the file on demand in some way but I don't know how-to.
So the million-dollar question is how can I achieve this using Vue js/javascript & raw-loader. Thanks in advance for your help