I'm using wbepack to compile a VUEJS project in which I import a JSON file which has an array of objects into vueJS however when accessing it via the component the object appears to be empty.
import Jason from './some.json';
export defaults {
data(){ return { someArr: Jason } } }
I'm not getting any compile errors or any other reported errors.
What could cause the object someArr to be empty?
P.S. I am able to load the json via AJAX successfully
Install json loader with
npm install json-loader --save
then in your webpack.config file add this loader
module: {
loaders: [
{
test: /\.json/,
loader: 'json',
}
],
}
loaders is now rules.Go to SCR and find a file named shims-vue.d.ts and add a JSON module like this.
declare module '*.json'
{
const value: { [key: string]: any };
export default value;
}
probably just a typo but you export default { not defaults
Assuming this isn't an issue are you exporting the JSON within ./some.json? i.e.
export default {
"foo": "bar",
...
}
This is how I do it:
In main.js:
import Conf from './static/app-conf.json';
Vue.prototype.$appConfig = Conf;
Now I can use that JSON-file whereever I need it by adding it to data:
<template>
<div>{{someText}}</div>
</template>
<script>
export default {
name: 'Something',
components: {},
props: {},
data: () => ({
someText: Vue.prototype.$appConfig.someText,
}),
computed: {},
methods: {}
};
</script>
This should work:
var yourJSONData= JSON.parse(Jason);
