Import JSON in VueJS

Question

I use wbepack to compile a VUEJS project in which I import a JSON file that has an array of objects in vueJS, however when I access it through the component, the object seems empty.

import Jason from './some.json';
export defaults {
data(){ return { someArr: Jason } } }

I do not receive compilation errors or any other error messages.

What could cause the object to someArrbe empty?

PS I can successfully download json via AJAX

Answer 1

Here is how I do it:

In main.js:

import Conf from './static/app-conf.json';
Vue.prototype.$appConfig = Conf;

Now I can use this JSON file wherever I need it by adding it to the data:

    <template>
      <div>{{someText}}</div>
    </template>
    <script>        
        export default {
                name: 'Something',
                components: {},
                props: {},
                data: () => ({
                    someText: Vue.prototype.$appConfig.someText,
                }),
                computed: {},
                methods: {}
            };
    </script>

Answer 2

Install json bootloader using

npm install json-loader --save

webpack.config

module: {
    loaders: [
        {
            test: /\.json/,
            loader: 'json',
        }
    ],
}

Answer 3

, export default { defaults

, , JSON ./some.json? .

export default {
  "foo": "bar",
  ...
}

Answer 4

:

var yourJSONData= JSON.parse(Jason);