时间戳

首页 > 解决方案 > 如何使用 Vue.js 读取文件内容的变化

javascript - 如何使用 Vue.js 读取文件内容的变化

问题描述

我有一个名为“Logs”的 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));
    },

好吧，这也行不通。刷新后，我看到了对文件的更新。

我认为解决方案是以某种方式按需加载文件，但我不知道如何操作。

所以百万美元的问题是如何使用 Vue js/javascript 和 raw-loader 来实现这一点。在此先感谢您的帮助

标签： javascriptvue.jsvuejs2vue-componentraw-loader

解决方案

文件被缓存，尝试删除缓存并重新导入文件：

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)，而是使用箭头函数。

推荐阅读