前提・実現したいこと
Vue Routerを用いて、axiosで返ってきたレスポンスのデータを遷移先(this.$router.push('check/')
)のVueファイルへ渡したいです。
発生している問題・エラーメッセージ
VueRouterのドキュメントを読んだのですが、URLへ「ドメイン/パラメーター」のような形で含めることは出来るのですが、URLに含ませずに送る方法が見当たらない状況です。
該当のソースコード
以下は、test1.Vueになります。
<template> <div> <h1>test</h1> <h5>テストページ</h5> <p v-if="errors.length"> <b>Please correct the following error(s):</b> <ul> <li v-for="(error,index) in errors" :key="index">{{ error }}</li> </ul> </p> <form action="" method="get" v-on:submit.prevent="submit"> <input type="text" v-model="inputUrl" name="url" placeholder="http://example.com"> <button type="submit">送信</button> </form> <!-- <loading v-if="loading"></loading> --> </div> </template> export default { name:'top-component', data() { return { errors:[], inputUrl:'' } }, methods: { submit(){ this.loading = true this.errors = []; this.csrftoken = Cookies.get('csrftoken'); console.log('csrftokenは ' , this.csrftoken); if(!this.inputUrl){ this.errors.push('urlを入力して下さい') }else if(!this.checkFormat(this.inputUrl)){ this.errors.push('URLが正しくありません') } if (!this.errors.length){ axios.post( '/polls/check/', this.inputUrl, { headers:{ 'X-CSRFToken':this.csrftoken } } ) .then(response => { console.log(response) this.info = response.data; this.$router.push('check/') }) </script>
試したこと
コンポーネント間の通信は可能なようなのですが、こちらは同一ファイル内でコンポーネントを定義し、その間でデータの受け渡しを行う方法かと思います。
今回は、test1.vueからtest2.vueコンポーネントへデータの受け渡しを行いたいのですが、2つのコンポーネント間は同一フォルダの別のファイルとして作成している形です。
補足情報(FW/ツールのバージョンなど)
Vueのプロジェクト自体は、VueCliを用いて作成しました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/06 07:28