CODEWITHSUNDEEP
javascriptajaxvue.jsvuejs2xmlhttprequest
Ahmed
Ahmed

Reputation: 93

Read file inside current directory using Vue

I'm trying to get text file data located in the same directory where my .vue file is. But it's not returning the text on both chrome and firefox. Instead it's returning following response, which is not the content of my text file. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>router-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Following is my vue file. 

<template>
  <body>
    <div> hello world </div>
  </body>
</template>

<script>
var $ = require('jquery');
window.jQuery = $;

export default {
  data () {
    return {
    }
  },
  created () {
    this.getPoemList(),
  },

  methods: {
   getPoemList () {

      function reqListener () {
         console.log(this.responseText);
      }

      var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", reqListener);
      oReq.open("GET", "hello.txt");
      oReq.send();


    }   // getPoemList function ends
  }     // methods end
}       // export default ends
</script>

<style scoped>
</style>

Contents of hello.txt are following. 

hello

Upvotes: 6

Views: 31546

Answers (3)

barfoos
barfoos

Reputation: 753

If you are using the Vite builder (e.g. when using the Vuetify framework) you can load a static asset as string without additional dependencies:

<script setup>
import hello from './hello.txt?raw'
const content = ref(hello)
</script>

Access it in your method like this:

<script>
export default {
  //...
  methods: {
    getPoemList () {
      console.log(content);
    }
  }
}
</script>

Upvotes: 1

Rodrigo Oliveira
Rodrigo Oliveira

Reputation: 1

<template>
  <body>
    <div> hello world {{variable}}</div>
  </body>
</template>

<script>
  var $ = require('jquery');
  window.jQuery = $;

  export default {
    data() {
      return {
        variable: "",
      }
    },
    mounted() {

      methods: {
        // create a vm variable pointing this
        const vm = this;

        function reqListener() {
          // captures the local value this.responseText to vm (this vuejs) vm.variable
          vm.variable = this.responseText;
          console.log(this.responseText);
        }

        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", reqListener);
        oReq.open("GET", "hello.txt");
        oReq.send();


      }
    }
  }

</script>

<style> </style>

Upvotes: -2

tony19
tony19

Reputation: 138206

I assume you're using Webpack, since you have a .vue file (requiring the vue-loader Webpack plugin)...

You can use raw-loader to load the .txt file as a string.

  1. Install raw-loader from NPM with:

    npm i -D raw-loader

  2. In <projectroot>/vue.config.js, configure Webpack to use raw-loader for *.txt:

    module.exports = {
  //...
  chainWebpack: config => {
    config.module
      .rule('raw')
      .test(/\.txt$/)
      .use('raw-loader')
      .loader('raw-loader')
      .end()
  },
}

  3. In your component's .vue file, use import or require to load hello.txt:

    <script>
import helloText from './hello.txt';  // OR: const helloText = require('./hello.txt')

export default {
  //...
  methods: {
    getPoemList () {
      console.log({ helloText });
    }
  }
}
</script>

Upvotes: 14

Related Questions