0

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

  1. 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

  2. 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

Govinda Sakhare
  • 5,009
  • 6
  • 33
  • 74
Mueyiwa Moses Ikomi
  • 1,069
  • 2
  • 12
  • 26
  • I had been thinking about this the wrong way and the reason for this is simple. The file is loaded and read from the server on the first pass using raw-loaded. If any changes happen, the file on the client-side, the client has no way of knowing and click to report the file wouldn't work unless some sort of serverside rendering is at play. I resorted to loading the file from the server at first pass and reading it from the server. This flow makes more sense. – Mueyiwa Moses Ikomi Apr 30 '20 at 03:43

1 Answers1

0

The file gets cached, try removing the cache and re-importing the file:

try {
  delete require.cache['!!raw-loader!ZCRMClientLibrary.log']

  import('!!raw-loader!ZCRMClientLibrary.log').then((log) => {
    this.logs = log.default
    console.log(log.default)
  })
} 
catch (error) { 
  console.log(error)
}

Also instead of using .bind(this), just use an arrow function instead.

AlekseyHoffman
  • 2,438
  • 1
  • 8
  • 31
  • thanks for your help but still doesn't work, I figure caching could be the issue... – Mueyiwa Moses Ikomi Apr 29 '20 at 18:17
  • @MueyiwaMosesIkomi I don't really understand how are you reading the file, is that just a website and you just visit it as a user to read the changes dispalyed directly on the HTML page? – AlekseyHoffman Apr 29 '20 at 18:28
  • @MueyiwaMosesIkomi and if that's the case, can you just re-import the file by reloading the website page with `location.reload()` ? – AlekseyHoffman Apr 29 '20 at 18:31
  • it's a vue.js app and I'm reading the file using raw-loader hence ('!!raw-loader!ZCRMClientLibrary.log'). Reloading the route is the last resort. I don't want the admins using the app to stress if there is an error, they can just see the logs file and if there is an update to the file due to an error, click a reload button to pull the new file...hence the whole import/require debacle – Mueyiwa Moses Ikomi Apr 29 '20 at 18:34