Is there a way to get and ref two or more local json file using vue and axios

Question

I am using vue to prototype some html components. Is there a way to get vue to recognize two json files?

vue.js

var vm = new Vue({
  el: '#douglas-laing',
   data: {
    products: [],
    contentPanels: []
},

created() {
axios
  .get( `products.json`, `contentPanel.json`)
  .then(response => {
    // JSON responses are automatically parsed.
    this.products = response.data;
    this.contentPanels = response.data;
  })
},

computed: {


}, // end computed

  methods: { }

});

in the html

<template v-for="contentPanel in contentPanels">
    {{ contentPanel.description }}
</template>

in the json file

  [
      {
        "description": "this is a content panel test",
      }
  ]

I think axios is an http-based promise.. so it expects a valid route url parameter in order to fetch data with the get method. Idk if you can just feed it a local json file. — Len Joseph, Apr 17 '19 at 14:23
Possible duplicate of [Promise All with Axios](https://stackoverflow.com/questions/52669596/promise-all-with-axios) — RWAM, Apr 17 '19 at 14:32

score 0 · Accepted Answer · answered Apr 17 '19 at 14:33

You can do that with axios.all(), something like:

methods: {
    getProducts() {
        return axios.get('/products.json');
    },
    getContentPanel() {
        return axios.get('/contentPanel.json');
    }
},
created(){
    axios.all([this.getProducts(), this.getContentPanel()])
    .then(axios.spread(function (products, contentPanel) {
        // Do something with the values
    }));
}

score 0 · Answer 2 · answered Apr 17 '19 at 14:56

got it

created() { axios .get( products.json) .then(response => { // JSON responses are automatically parsed. this.products = response.data; }) axios .get( contentPanel.json) .then(response => { // JSON responses are automatically parsed. this.contentPanels = response.data; }) },

Is there a way to get and ref two or more local json file using vue and axios

2 Answers2