I have a <form> in vue. I send that form to server, get a JSON response, print it to console. It works fine.

However I need to take that JSON response and display it on another page. For instance, I have two .vue files: GetAnimal.vue that has the form and retrieves the animal data from an API and a DisplayAnimal.vue that displays animal's data. I need to direct the response animal data from GetAnimal.vue to DisplayAnimal.vue.

GetAnimal.vue:

<template>
 <form v-on:submit.prevent="getAnimal()">
  <textarea v-model = "animal"
      name = "animal" type="animal" id = "animal"
      placeholder="Enter your animal here">
  </textarea>

  <button class = "custom-button dark-button"
      type="submit">Get animal</button>
 </form>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'App',
        data: function() {
            return {
                info: '',
                animal: ''
            }
        },
        methods:  {
            getAnimal: function()  {
                 axios
                    .get('http://localhost:8088/animalsapi?animal=' + this.animal)
                    .then(response => (this.info = response.data));
                 console.log(this.info);
            }
        }
    }
</script>

response: retrieves a JSON with animal data, say like this:

{
"fur-color": "yellow",
"population": 51000,
"isExtinct": false,
"isDomesticated": true
}

and I now want to give that JSON to a DisplayAnimal.vue at /viewanimal endpoint:

DisplayAnimal.vue:

<template>
  <div>
    <p>Animal name: {{animal}}}</p>
    <p>Fur color: {{furColor}}</p>
    <p>Population: {{population}}</p>
    <p>Is extinct: {{isExtinct}}</p>
    <p>Is domesticated: {{isDomesticated}}</p>
  </div>
</template>

How would I do that? I know I can redirect via this.$router.push({ path });, but I've only used it for navigation, while here JSON response needs to be passed. Is this even a correct / good practice way of approaching this?

EDIT:

I tried this:

in GetAnimal.vue I added this data:

data: function() {
   return {
     animal:  {
       name: 'Cat',
       furColor: 'red',
       population: '10000',
       isExtinct: false,
       isDomesticated: true
}

and in DisplayAnimal.vue this:

<script>
    export default  {
        props:  {
            animal:  {
                name: {
                    type: String
                },
                furColor:  {
                    type: String
                },
                population: String,
                isExtinct: String,
                isDomesticated: String
            }
        }
    }

</script>

and in GetAnimal.vue I added this:

methods: {
            animals: function()  {
                alert("animals");
                this.$router.push({name: 'viewanimal',
                                query: {animal: JSON.stringify(this.animal)}});
            },

to try to display that test animal using the display ponent. However it just didn't work - I get an empty page.

I have a <form> in vue. I send that form to server, get a JSON response, print it to console. It works fine.

However I need to take that JSON response and display it on another page. For instance, I have two .vue files: GetAnimal.vue that has the form and retrieves the animal data from an API and a DisplayAnimal.vue that displays animal's data. I need to direct the response animal data from GetAnimal.vue to DisplayAnimal.vue.

GetAnimal.vue:

<template>
 <form v-on:submit.prevent="getAnimal()">
  <textarea v-model = "animal"
      name = "animal" type="animal" id = "animal"
      placeholder="Enter your animal here">
  </textarea>

  <button class = "custom-button dark-button"
      type="submit">Get animal</button>
 </form>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'App',
        data: function() {
            return {
                info: '',
                animal: ''
            }
        },
        methods:  {
            getAnimal: function()  {
                 axios
                    .get('http://localhost:8088/animalsapi?animal=' + this.animal)
                    .then(response => (this.info = response.data));
                 console.log(this.info);
            }
        }
    }
</script>

response: retrieves a JSON with animal data, say like this:

{
"fur-color": "yellow",
"population": 51000,
"isExtinct": false,
"isDomesticated": true
}

and I now want to give that JSON to a DisplayAnimal.vue at /viewanimal endpoint:

DisplayAnimal.vue:

<template>
  <div>
    <p>Animal name: {{animal}}}</p>
    <p>Fur color: {{furColor}}</p>
    <p>Population: {{population}}</p>
    <p>Is extinct: {{isExtinct}}</p>
    <p>Is domesticated: {{isDomesticated}}</p>
  </div>
</template>

How would I do that? I know I can redirect via this.$router.push({ path });, but I've only used it for navigation, while here JSON response needs to be passed. Is this even a correct / good practice way of approaching this?

EDIT:

I tried this:

in GetAnimal.vue I added this data:

data: function() {
   return {
     animal:  {
       name: 'Cat',
       furColor: 'red',
       population: '10000',
       isExtinct: false,
       isDomesticated: true
}

and in DisplayAnimal.vue this:

<script>
    export default  {
        props:  {
            animal:  {
                name: {
                    type: String
                },
                furColor:  {
                    type: String
                },
                population: String,
                isExtinct: String,
                isDomesticated: String
            }
        }
    }

</script>

and in GetAnimal.vue I added this:

methods: {
            animals: function()  {
                alert("animals");
                this.$router.push({name: 'viewanimal',
                                query: {animal: JSON.stringify(this.animal)}});
            },

to try to display that test animal using the display ponent. However it just didn't work - I get an empty page.

• javascript
• json
• vue.js
• vuejs2

• 4 The right way to save data like this is using Vuex states – Tyriy Taran Commented May 24, 2020 at 16:05
• 1 Why not $router.push the form inputs (as queries) to the receiving ponent and invoke the API there? Otherwise, I'd have to agree with the others here, that this would be best done with Vuex. – Yom T. Commented May 27, 2020 at 8:18
• 1 If you want quick solution you can localStorage.setItem("animal", JSON.stringify(yourdata)); and then you can retrieve with var data = JSON.parse(localStorage.getItem("animal")); finally remove it with localStorage.removeItem("animal"); you can read about localStorage here developer.mozilla/en-US/docs/Web/API/Window/localStorage . The proper solution would be you starting to use vuex and then you can share data between router ponents with ease, vuex might sound scary but that's the best option you've got in SPA's. – simultsop Commented May 27, 2020 at 10:03
• @mentorgashi How would it work concurrently though? With several users simultaneously filling the form with a different animal and wanting to see their animal's data? Doesn't localStorage work as global / static variables that have only 1 copy / value that are shared everywhere? – parsecer Commented May 27, 2020 at 14:30
• 1 You can start with basics of vuex here vuemastery./courses/mastering-vuex/… very good and thorough explanation. – simultsop Commented May 27, 2020 at 17:53

4 Answers 4

Using Vuex, you can solve this easily

Working example on netlify https://m-animalfarmlify.app/

code on github https://github./manojkmishra/animalfarm

GetAnimal.vue ( I have disabled axios call for testing and hardcoded info)

 <template>
 <form v-on:submit.prevent="getAnimal()">
   <textarea v-model = "animal" name = "animal" type="animal" id = "animal"
   placeholder="Enter your animal here">
  </textarea>
  <button class = "custom-button dark-button"
  type="submit">Get animal</button>
  </form>
 </template>
 <script>
 import axios from 'axios';
 export default 
 {
    name: 'App',
    data: function() {  return { info: '', animal: ''  }  },
    methods:  {
        getAnimal: function()  {
            // axios
            //   .get('http://localhost:8088/animalsapi?animal=' + this.animal)
             //   .then(response => (this.info = response.data),
                this.info={"fur-color": "yellow","population": 51000,"isExtinct":     
                            false,"isDomesticated": true },
                this.$store.dispatch('storeAnimals', this.info)
                //);
        }
    }
 }
 </script>

DisplayAnimal.vue

<template>
<div>
<p>Animal name: {{stateAnimal.animal}}</p>
<p>Fur color: {{stateAnimal.furColor}}</p>
<p>Population: {{stateAnimal.population}}</p>
<p>Is extinct: {{stateAnimal.isExtinct}}</p>
<p>Is domesticated: {{stateAnimal.isDomesticated}}</p>
 </div>
</template>
<script>
 import {mapState, mapGetters} from 'vuex';
export default {
puted:{  ...mapState({ stateAnimal:state => state.modulename.stateAnimal }),   
 },
}
</script>

modulename.js ( store module)

export default
{
 state: {stateAnimal:null,  },
 getters:{ },
 mutations: 
 {    ['STORE_ANIMALS'] (state, payload) 
    {  state.stateAnimal = payload;  
    console.log('state=',state)
   },

  },
 actions: 
 {  storeAnimals: ({mit}, data) => 
    { console.log('storeanim-data-',data);
      mit(  'STORE_ANIMALS', data   );  
    },     
  }
  }

Index.js (for vuex store), you can disable persistedstate as its for saving state if page is refreshed

import Vue from 'vue'
import Vuex from 'vuex'
import modulename from './modules/modulename'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState({ storage: sessionStorage })],
state: {  },
mutations: {  },
actions: {  },
modules: { modulename }
})

State is available/shared for all the ponents

well first of all create a second folder call it services and create service.js for you axios call- good practice and cleaner code overall. second use vuex. this kind of data is best used with vuex.

As far as I understand GetAnimal.vue is the parent ponent and you wish to display it in the child ponent DisplayAnimal.vue. If so and you wish to see if this works just use props. you can also send that same information or any other information for the child back to the parent using an $emit(). STRONGLY remended to use vuex in order to manage the state

Vue.ponent('product',{
  props:{
    message:{
      type:String,
      required:true,
      default:'Hi.'
    }
  },
  template:`<div>{{message}}</div>`,
  data(){...}
})

//html in the other ponent you axios call is in this ponent //<product meesage="hello"></product>

I would pass the animal name/id as a route param to the display page and have that ponent responsible for fetching and displaying the relevant animal data. This avoids the situation where a user could visit the display page directly via the URL and see an inplete page.

In situations where you want to share local state between pages, as others have pointed out you'd probably want to use Vuex.

EDIT:

I'm adding some code to my answer as requested by the OP.

Routes:

const routes = [
  { path: "/", ponent: SearchAnimals },
  { path: "/viewanimal/:name", ponent: DisplayAnimal, name: "displayAnimal" }
];

DisplayAnimal.vue:

<template>
  <div>
    <p>Animal name: {{animal.name}}</p>
    <p>Fur color: {{animal.furColor}}</p>
    <p>Population: {{animal.population}}</p>
    <p>Is extinct: {{animal.isExtinct}}</p>
    <p>Is domesticated: {{animal.isDomesticated}}</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DisplayAnimal",
  data: () => ({
    animal: {}
  }),
  methods: {
    fetchAnimal(name) {
      axios
        .get(`http://localhost:8088/animalsapi?animal=${name}`)
        .then(response => {
          this.animal = response.data;
        });
    }
  },
  created() {
    this.fetchAnimal(this.$route.params.name);
  }
};
</script>

SearchAnimals.vue:

<template>
  <form v-on:submit.prevent="onSubmit">
    <textarea
      v-model="animal"
      name="animal"
      type="animal"
      id="animal"
      placeholder="Enter your animal here"
    ></textarea>
    <button type="submit">Get animal</button>
  </form>
</template>

<script>
export default {
  name: "SearchAnimal",
  data: () => ({
    animal: ""
  }),
  methods: {
    onSubmit() {
      this.$router.push({
        name: "displayAnimal",
        params: { name: this.animal }
      });
    }
  }
};
</script>

Obviously this is a bare-bones example, so doesn't contain any error handling etc., but it should get you up and running.