Как прочитать изменения в содержимом файла, используя Vue. js

Question

У меня есть компонент Vue, называемый «Журналы», который я использую для отслеживания изменений в моем файле журнала; это попытка предотвратить ручную проверку файла.

Указанный файл журнала по праву называется log.txt и загружен где-то на моем сайте.

Первой проблемой было чтение файла в моем Компонент, к которому пришло сырье, пришел на помощь. см. тот же код ниже:

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

Код выше не требует пояснений; там, где компонент смонтирован, вызывается метод getLogs и файл читается, а переменная устанавливается соответствующим образом. Это прекрасно работает, когда я получаю желаемый результат в шаблоне.

{{ logs }}

Теперь моя дилемма в том, что я хочу иметь возможность обновлять фактический файл log.txt (я вручную редактирую его сейчас, но будет автоматизирован), и когда я нажму на кнопку, увидите обновленное значение.

То, что я пытался

1. Создать кнопку, которая вызывает this.getLog в шаблоне ... но когда я нажимаю на нее, она загружается точно так же данные без обновления

2. Я также пытался импортировать файл по требованию

     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));
       },
   

Ну, это тоже не работает. После обновления sh.

отображается обновление файла. Я думаю, что решение будет заключаться в том, чтобы каким-то образом загрузить файл по требованию, но я не знаю, как это сделать.

Таким образом, вопрос на миллион долларов заключается в том, как мне добиться этого, используя Vue js / javascript & raw-loader. Заранее спасибо за помощь

Answer 1

Файл кэшируется, попробуйте удалить кэш и повторно импортировать файл:

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)
}

Также вместо использования .bind(this), просто используйте вместо него функцию стрелки.