###前提・実現したいこと
vuejs+axiosを使ったSPAを作成しております。
多くのサイトで見るユーザー名をクリックしたら、その人のプロフィール画面が出てくるような仕組みを実現したいです。
F/WはLaravel5を使用しております。
現在、基本となるページには全てのユーザー一覧が表示されている状態です。
手順としましては、
1.任意のユーザーを選択(ユーザーIDをクリック。デフォルトではユーザーID=nullでユーザー全員のデータを取得)
2.user_idをAjaxで投げる
3.router.mapで受け取り
4.APIからデータ取得
5.vueへの反映
となり、routingを管理するmain.jsとprofileListの2ファイルで実装可能かと考えております。
一連のコーディングが分からず苦戦しており、どなたかご教示頂ければ幸いです。
main.js
javascript
1import Vue from 'vue'; 2import Router from 'vue-router'; 3import Resource from 'vue-resource'; 4import App from './components/App.vue'; 5import HomeView from './components/HomeView.vue'; 6import profileList from './components/profileList.vue'; 7 8 9 10// Install some plugins 11Vue.use(Router); 12Vue.use(Resource); 13 14export var router = new Router({ 15 history: true 16}); 17 18router.map({ 19 '/': { 20 name: 'home', 21 component: HomeView 22 }, 23 '/sample/user/list/': { 24 name: 'profile', 25 component: profileList 26 }, 27 '/sample/user/list/:user_id': { 28 name: 'profile', 29 component: profileList, 30 props: true 31 }, 32 33}); 34 35
profile.vue
javascript
1<template> 2 <ul class="profile_field"> 3 <li v-for="profile in profileList" v-bind:id="profile.profile_id" v-bind:user-id="profile.user_id" class="photo-card"> 4 <div class="caption"> 5 <p><router-link to="foo"> {{ profile.name }} </router-link></p> <!-- ←ここをクリックしたらuser_idを投げて任意のユーザーのprofile取得--> 6 <button type="button" class="btn btn-success">Profile List</button> 7 </div> 8 </li> 9 </ul> 10</template> 11 12<script> 13import profile from './profile.vue'; 14import axios from 'axios'; 15 16export default { 17 name: 'profiles', 18 components: { 19 profile 20 }, 21 data: function() { 22 return { 23 profileList : [] 24 } 25 }, 26 created: function() { 27 console.log("created"); 28 var _this = this; 29 axios.get('/profile/')←ここにuser_idをくっつけてAPI入手したい 30 .then(function (response) { 31 console.log(response.data); 32 _this.photoList = response.data; 33 }) 34 .catch(function (error) { 35 alert(error); 36 }); 37 }, 38 methods: { 39 votePhoto: function(id) { 40 alert(id); 41 } 42 } 43} 44</script>
profile/{user_id}で取得できるAPI
javascript
1[ 2 { 3 "name": "person1", 4 "user_id": 2, 5 "photo_id": 6, 6 "original_path": "/images/person1.jpg" 7 }, 8 { 9 "name": "person1", 10 "user_id": 2, 11 "photo_id": 7, 12 "original_path": "/images/person1-2.jpg" 13 }, 14... 15]
###試したこと 上記は実際にはErrorとなりますが、あくまでやりたいことをイメージしやすいよう書いてみました。 よろしくお願いいたします。 ###補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。