web-dev-qa-db-fra.com

Vue-Router passant des données avec des accessoires

J'ai du mal à passer des accessoires en utilisant Vue-Router. Il semble que je ne puisse pas accéder aux accessoires lorsque je les amène dans la vue suivante. Voici mon objet méthodes:

methods: {
    submitForm() {
      let self = this;
      axios({
        method: 'post',
        url: url_here,
        data:{
          email: this.email,
          password: this.password
        },
        headers: {
          'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
      }).then(function(response) {
        self.userInfo = response.data;
        self.$router.Push({name: 'reading-comprehension', props: {GUID:self.userInfo.uniqueID }});
      })
   }
}

La demande de publication fonctionne, mais lorsque j'essaie de router vers un nouveau composant et de passer des accessoires pour accéder au composant suivant, il dit,

La propriété ou la méthode "guid" n'est pas définie sur l'instance mais référencée pendant le rendu. Assurez-vous de déclarer les propriétés de données réactives dans l'option de données.

Soit dit en passant, le composant vers lequel je router ressemble à ceci:

<template lang="html">
  <div class="grid-container" id="read-comp">
    <div class="row">
      <h1>Make a sentence:</h1>
      {{ GUID }}
    </div>
  </div>
</template>

<script>
export default {
 data(){
   return {
     props: ['GUID'],
   }
 }
}
vue.jsvuejs2vue-componentaxiosvue-router
14
lnamba

Lorsque vous accédez à la nouvelle route par programme, vous devez tilisez params, pas des accessoires .

self.$router.Push({name: 'reading-comprehension', params: {guid:self.userInfo.uniqueID }});

Deuxièmement, dans votre définition d'itinéraire, vous devez définir la propriété props sur true.

{name: "reading-comprehension", component: SomeComponent, props: true }

Enfin, dans votre composant, vous définissez props séparément de data et ce doit être en minuscules.

export default {
 props: ["guid"],
 data(){
   return {
   }
 }
}
31
Bert