0

If I have two components, the first one is called A:

<template>
<input  required type='text' v-model.trim="number">
<input type="date" v-model="date" >
<button @click='allRecords(number,date)'>ok</button>
 <table >
    <thead>
      <th>Coordonnées</th>
    </thead>
    <tbody>
      <tr v-for='contact in contacts'>
        <td @click="seeDetails(contact.id)" > {{ contact.data.to }} 
</td> 
      </tr>
    </tbody>
  </table>
</template>

<script lang="js">
import axios from 'axios';
import Vue from 'vue';
export default {
name: 'A',
props: [],
data() {
  return {
contacts: [],
number: '',
date: new Date().toISOString().slice(0,10),
nombre:0
 }

},
methods: {
 allRecords: function(number,date) {
   axios.get(`/api/contacts?number=${number}&date=${date}`)
     .then(response => {
       this.contacts = response.data.list;
       this.nombre = response.data.count;
     })
     .catch(error => {
       console.log(error);
     });
 },
 seeDetails (id) {
     this.$router.push({ name: 'B', params: { id }});
   }, 
}
</script>

the 2nd is called B:

  <template>
  <div> {{details.data.add }}</div>
  </template>
  <script lang="js">
    import axios from 'axios';
    export default  {
     name: 'B',
     props: [],
      mounted() {
       const id = this.$router.currentRoute.params.id;
    this.fetchContactData(id);
   },
   data() {
    return {
     details: []
    }
  },
  methods: {
   fetchContactData(id){
    axios.get(`/api/recherche/${id}`)
    .then(response => {
        this.details = response.data
    })
    .catch(error => {
        console.log(error);
      });
     },
    },
   } 
  </script>

I would like when I leave my component B has my component A to have the information of A which corespondent to the result that I had in B without needing to enter again the date and the number. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

static
  • 197
  • 1
  • 3
  • 13
  • So you want to have both components use the same value, and if one of the components changes the value, both update? If so, look into Vuex. You probably want to save the data in componentB when it is discarded / destroyed. Look into beforeDestroyed https://alligator.io/vuejs/component-lifecycle/ – Olaf Jun 28 '18 at 14:54
  • You might find it useful to read about the [communication theory in a Vue app](https://stackoverflow.com/a/49702934/1218980). – Emile Bergeron Jun 28 '18 at 14:55
  • I just wish that when I leave B to A, A keeps the information he had before going to B without reinitialising. – static Jun 29 '18 at 09:08
  • Did you try sitting your state outside the component. Is there some reason this won't work? If so, look at the keep-alive tag. But I would prefer app state outside Vue. – bbsimonbb Jun 29 '18 at 10:48

2 Answers2

1

You have waded into the problem of application state, and views can differ. The recommended solution is vuex. For simple situations, I like to keep app state in a global javascript variable. Your vue components don't need to pass state, but they refer to a single source of truth outside of vue, which they can all display and modify. So you're app state is a contacts array, and your B component, which needs a better name, will just push rows onto this array. When you return to A, your page will reflect the new data.

bbsimonbb
  • 27,056
  • 15
  • 80
  • 110
  • I just wish that when I leave B to A, A keeps the information he had before going to B without reinitialising. – static Jun 29 '18 at 09:08
0

I see you want to show the details of a specific contact based on its ID.

But is your router configured correctly?

Dynamic Route Matching:

routes: [
    { path: '/contacts/:contact', component: B }
]

See more at https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

mpetrov
  • 391
  • 2
  • 8
  • yes I manage the route, I just wish that when I leave B to A, A keeps the information he had before going to B without reinitialising. – static Jun 29 '18 at 09:10