web-dev-qa-db-ja.com

Vue-Routerが小道具でデータを渡す

Vue-Routerを使用して小道具を渡すのに苦労しています。次のビューに持ち込むと、小道具にアクセスできないようです。これは私のメソッドオブジェクトです：

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 }});
      })
   }
}

投稿リクエストは機能していますが、新しいコンポーネントにルーティングして、次のコンポーネントにアクセスするための小道具を渡そうとすると、

プロパティまたはメソッド「guid」はインスタンスで定義されていませんが、レンダリング中に参照されます。データオプションでリアクティブデータプロパティを必ず宣言してください。

ところで、ルーティング先のコンポーネントは次のようになります。

<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

プログラムで新しいルートに移動するときは、 propsではなくparamsを使用 にする必要があります。

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

次に、ルート定義で、 propsプロパティ をtrueに設定する必要があります。

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

最後に、コンポーネントでpropsをdataとは別に定義し、すべて小文字にする必要があります。

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