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

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

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

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

Laravel 5

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

Q&A

1回答

2755閲覧

Laravelとvueを使っていいねボタンを作りたい

ringosan

総合スコア11

Vue.js

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

Laravel 5

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

0グッド

0クリップ

投稿2018/12/10 09:37

いいね機能を作りたいですが、view.blade.phpにボタンは表示されるけれど押してもそのまま何も起こりません。

view.blade.php画面

こんな状態で止まります。
npm run dev を実行してもエラーは出ません。
どなたか解決方法を教えてください。

**app.js **

javascript

1import Vue from 'vue'; 2import VueRouter from 'vue-router'; 3/** 4 * First we will load all of this project's JavaScript dependencies which 5 * includes Vue and other libraries. It is a great starting point when 6 * building robust, powerful web applications using Vue and Laravel. 7 */ 8 9require('./bootstrap'); 10 11window.Vue = require('vue'); 12 13// vue-routerを使う宣言 14Vue.use(VueRouter); 15 16 17/** 18 * Next, we will create a fresh Vue application instance and attach it to 19 * the page. Then, you may begin adding components to this application 20 * or customize the JavaScript scaffolding to fit your unique needs. 21 */ 22 23Vue.component('example-component', require('./components/ExampleComponent.vue')); 24 25Vue.component('like', require('./components/Like.vue')); 26 27 28const app = new Vue({ 29 router, 30 el: '#app' 31}); 32 33const router = new VueRouter({ 34 mode: 'history', 35 routes: [ 36 { path: '/like', component: require('./components/Like.vue') }, 37 ] 38}); 39

Like.vue

javascript

1<template> 2 3<like :postid="1" inline-template> 4<button class="button is-medium" @click="iLikeIt":disabled="disabled" >いいね</button> 5</like> 6 7</template> 8 9<script> 10export default{ 11props:['postid'], 12 13data(){ 14return{ 15disabled:false 16} 17}, 18 19methods:{ 20iLikeIt(){ 21this.disabled=true; 22axios.post('/like', { 23id:this.postid.id 24}) 25.then(function (response) { 26console.log(response); 27}); 28} 29} 30 31} 32</script> 33

web.php

php

1Route::post('/like','ArticleController@like')->name('like'); 2

view.blade.php

php

1@extends('layouts.app') 2 3@section('content') 4<div class="main"> 5 <div class="contents"> 6 @foreach($article as $art) 7 <div class="head_contents"> 8 9 <ul class="user"> 10 <li class="top"><a href="{{route('profile',$art->author)}}"><img src="/images/{{$art->user->p_image}}" class="maru"></a></li> 11 <li class="top">{{$art->user->username}}</li> 12 <li class="top"><small>{{$art->created_at->format('Y年m月d日')}}</small></li> 13 </ul> 14 </div> 15 <h1>{{$art->title}}</h1> 16 {{$art->tag}} 17 18<br> 19 20 21 22 23 <like></like> 24 25 <hr> 26<p>{!! $art->article !!}</p> 27 @endforeach 28 </div> 29 <div class="menu"> 30 <h5 class="new_article">記事</h5> 31 <div class="new"> 32 @foreach($new as $n) 33 <ul> 34 <li class="new_li"><a href="/article/past/{{$n->id}}" class="titles">{{$n->title}}</a></li> 35 </ul> 36 @endforeach 37 </div> 38 </div> 39</div> 40 41@endsection 42

Controller

php

1public function like(Request $request){ 2 $post_id = $request->id; 3 //post_idが存在しない場合は終わり 4 $post = Article::where('id','=',$post_id)->get(); 5 if (!$post) { 6 return null; 7 } 8 //ログインしているユーザーの情報を取得します 9 $user = Auth::user(); 10 //ユーザーがライクを押しているか 11 $like = $user->likes()->where('post_id', $post_id)->first(); 12 //既に押してるときは何もしない 13 if ($like) { 14 return null; 15 } 16 //初めての押下時は新規にLikeテーブルにレコードを入れます 17 else{ 18 $like = new Like(); 19 } 20 $like->like = 1;//ここで1のみを扱います 21 $like->user_id = $user->id; 22 $like->post_id = $post->id; 23 24 $like->save(); 25 26 return null; 27 }

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

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

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

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

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

guest

回答1

0

html

1<like :postid="1" inline-template>

vue

1props:['postid'],

となってるので

vue

1id:this.postid.id

ここは

vue

1id:this.postid

ではないかと(値どうなってるか出力してみるといいかと&LaravelController部分も)

投稿2018/12/10 10:12

rururu3

総合スコア5545

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

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

ringosan

2018/12/10 12:23

やってみたんですけど変わらなかったです。
rururu3

2018/12/10 13:41

Chromeデベロッパー・ツールとかでは何も出てないんですか?
ringosan

2018/12/10 15:02

[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (like, line 0) [Error] Unhandled Promise Rejection: Error: Request failed with status code 500 (anonymous関数) (app.js:24975) promiseReactionJob この二つのエラーが出てます。
rururu3

2018/12/10 15:31

それ、サーバーエラーなのでサーバーのログ見てください
ringosan

2018/12/11 01:40

前のエラーは無くなりましたが Failed to load resource: the server responded with a status of 404 (Not Found) このエラーがでます。 クリックしてもデータベースに保存されません。
rururu3

2018/12/11 02:29

404はページが存在しない・・・・ですのでアドレスあってるか確認してください (調べたらすぐにページが存在しないとかわかるはずなのでちょっとは調べていただければとても助かります)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問