Styjun

Historically, were women trained for obligatory wars? Or did they serve some other military function?

Where did the extra Pym particles come from in Endgame?

Does jamais mean always or never in this context?

Can a creature tell when it has been affected by a Divination wizard's Portent?

Unexpected email from Yorkshire Bank

Can fracking help reduce CO2?

What does "rf" mean in "rfkill"?

In gnome-terminal only 2 out of 3 zoom keys work

Did Henry V’s archers at Agincourt fight with no pants / breeches on because of dysentery?

Possible to set `foldexpr` using a function reference?

Why does processed meat contain preservatives, while canned fish needs not?

How to stop co-workers from teasing me because I know Russian?

Why does Bran Stark feel that Jon Snow "needs to know" about his lineage?

Need help understanding harmonic series and intervals

Asahi Dry Black beer can

Where does the labelling of extrinsic semiconductors as "n" and "p" come from?

Toggle Overlays shortcut?

Phrase for the opposite of "foolproof"

How to set the font color of quantity objects (Version 11.3 vs version 12)?

Build a trail cart

Feels like I am getting dragged in office politics

Why do computer-science majors learn calculus?

Options leqno, reqno for documentclass or exist another option?

How to creep the reader out with what seems like a normal person?

Trying to load json through Vue Axios

Safely turning a JSON string into an objectHow do I format a Microsoft JSON date?Can comments be used in JSON?How can I pretty-print JSON in a shell script?What is the correct JSON content type?Why does Google prepend while(1); to their JSON responses?Why can't Python parse this JSON data?How can I pretty-print JSON using JavaScript?Parse JSON in JavaScript?How do I POST JSON data with Curl from a terminal/commandline to Test Spring REST?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I'm trying to include a local JSON file from the static directory called blogs.json which has a load of blogs inside it.

I'm currently loading the blogs via Vue Axios which is a module I'm including in Nuxt JS.

Currently, the blogs are being loaded from the json file perfectly fine, however there is a noticeable few ms delay before the blogs are loaded, I'm trying to figure out a better approach to load the json file and populate the blogs array listed inside data()

This is my current code:

<script>
import PageBanner from '~/components/PageBanner';

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: [],
 isLoading: true
 
 ,
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 

</script>

This works just fine, but how could I modify this to load the json more quickly?

json vue.js vuejs2 nuxt.js nuxt

share|improve this question

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe your JSON is local data, then you do not need to use the async code in order to fetch data. you can directly use as the variable if you want it to load more quickly.
  
  – varit05
  Mar 22 at 19:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not that familiar with nuxt.js (as i am with vue.js only) but you may take a look at the documentation, especially Middleware here: nuxtjs.org/guide/routing#middleware
  
  – Kodiak
  Mar 22 at 19:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How would I implement this?
  
  – Ryan Holton
  Mar 22 at 20:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How big is your blogs.json file?
  
  – Skipper
  Mar 23 at 3:35
  

  
  
  
  

add a comment | 

1

I'm trying to include a local JSON file from the static directory called blogs.json which has a load of blogs inside it.

I'm currently loading the blogs via Vue Axios which is a module I'm including in Nuxt JS.

Currently, the blogs are being loaded from the json file perfectly fine, however there is a noticeable few ms delay before the blogs are loaded, I'm trying to figure out a better approach to load the json file and populate the blogs array listed inside data()

This is my current code:

<script>
import PageBanner from '~/components/PageBanner';

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: [],
 isLoading: true
 
 ,
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 

</script>

This works just fine, but how could I modify this to load the json more quickly?

json vue.js vuejs2 nuxt.js nuxt

share|improve this question

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I believe your JSON is local data, then you do not need to use the async code in order to fetch data. you can directly use as the variable if you want it to load more quickly.
  
  – varit05
  Mar 22 at 19:21
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not that familiar with nuxt.js (as i am with vue.js only) but you may take a look at the documentation, especially Middleware here: nuxtjs.org/guide/routing#middleware
  
  – Kodiak
  Mar 22 at 19:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How would I implement this?
  
  – Ryan Holton
  Mar 22 at 20:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How big is your blogs.json file?
  
  – Skipper
  Mar 23 at 3:35
  

  
  
  
  

add a comment | 

I'm trying to include a local JSON file from the static directory called blogs.json which has a load of blogs inside it.

I'm currently loading the blogs via Vue Axios which is a module I'm including in Nuxt JS.

Currently, the blogs are being loaded from the json file perfectly fine, however there is a noticeable few ms delay before the blogs are loaded, I'm trying to figure out a better approach to load the json file and populate the blogs array listed inside data()

This is my current code:

<script>
import PageBanner from '~/components/PageBanner';

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: [],
 isLoading: true
 
 ,
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 

</script>

This works just fine, but how could I modify this to load the json more quickly?

json vue.js vuejs2 nuxt.js nuxt

share|improve this question

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

<script>
import PageBanner from '~/components/PageBanner';

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: [],
 isLoading: true
 
 ,
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 

</script>

share|improve this question

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

share|improve this question

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

asked Mar 22 at 19:17

Ryan HoltonRyan Holton

6417

1 Answer
1

active

oldest

votes

3

Just import it, do this and it should work God willing:

<template>
 <div>
 <!-- There should be no delay -->
 blogs 
 </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: blogsFromJson, // Just set it here
 isLoading: true
 
 ,
 /* No need for this anymore
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 
 */

</script>

share|improve this answer

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RyanHolton Please mark this answer as correct if it worked for you. Thanks!
  
  – Hamada Fadil Mahdi
  Apr 6 at 18:30
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55306447%2ftrying-to-load-json-through-vue-axios%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

3

Just import it, do this and it should work God willing:

<template>
 <div>
 <!-- There should be no delay -->
 blogs 
 </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: blogsFromJson, // Just set it here
 isLoading: true
 
 ,
 /* No need for this anymore
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 
 */

</script>

share|improve this answer

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RyanHolton Please mark this answer as correct if it worked for you. Thanks!
  
  – Hamada Fadil Mahdi
  Apr 6 at 18:30
  

  
  
  
  

add a comment | 

3

Just import it, do this and it should work God willing:

<template>
 <div>
 <!-- There should be no delay -->
 blogs 
 </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: blogsFromJson, // Just set it here
 isLoading: true
 
 ,
 /* No need for this anymore
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 
 */

</script>

share|improve this answer

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @RyanHolton Please mark this answer as correct if it worked for you. Thanks!
  
  – Hamada Fadil Mahdi
  Apr 6 at 18:30
  

  
  
  
  

add a comment | 

Just import it, do this and it should work God willing:

<template>
 <div>
 <!-- There should be no delay -->
 blogs 
 </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: blogsFromJson, // Just set it here
 isLoading: true
 
 ,
 /* No need for this anymore
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 
 */

</script>

share|improve this answer

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

<template>
 <div>
 <!-- There should be no delay -->
 blogs 
 </div>
<template>
<script>
import PageBanner from '~/components/PageBanner';

import blogsFromJson from '~/articles/blogs.json'; // Or wherever it is found

export default 
 head: 
 title: 'Site Title: Blog',
 meta: [
 hid: 'description', name: 'description', content: 'Site description' 
 ]
 ,
 components: 
 PageBanner
 ,
 data () 
 return 
 blogs: blogsFromJson, // Just set it here
 isLoading: true
 
 ,
 /* No need for this anymore
 created () 
 this.axios.get("/articles/blogs.json").then((response) => 
 this.blogs = response.data
 this.isLoading = false
 )
 
 */

</script>

share|improve this answer

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514

answered Mar 22 at 21:16

Hamada Fadil MahdiHamada Fadil Mahdi

514