質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

2559閲覧

vuejsでのAjax取得とComponent反映について

supermaruetsu

総合スコア148

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2017/04/17 07:12

###前提・実現したいこと
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/ツール等のバージョンなど) より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

勘違いで悩んでおりました。解決しました!

投稿2017/07/12 02:10

supermaruetsu

総合スコア148

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問