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

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

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

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

Laravel 5

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

受付中

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

ringosan
ringosan

総合スコア0

Vue.js

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

Laravel 5

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

1回答

0評価

0クリップ

2170閲覧

投稿2018/12/10 09:37

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

view.blade.php画面

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

**app.js **

javascript

import Vue from 'vue'; import VueRouter from 'vue-router'; /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); // vue-routerを使う宣言 Vue.use(VueRouter); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example-component', require('./components/ExampleComponent.vue')); Vue.component('like', require('./components/Like.vue')); const app = new Vue({ router, el: '#app' }); const router = new VueRouter({ mode: 'history', routes: [ { path: '/like', component: require('./components/Like.vue') }, ] });

Like.vue

javascript

<template> <like :postid="1" inline-template> <button class="button is-medium" @click="iLikeIt":disabled="disabled" >いいね</button> </like> </template> <script> export default{ props:['postid'], data(){ return{ disabled:false } }, methods:{ iLikeIt(){ this.disabled=true; axios.post('/like', { id:this.postid.id }) .then(function (response) { console.log(response); }); } } } </script>

web.php

php

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

view.blade.php

php

@extends('layouts.app') @section('content') <div class="main"> <div class="contents"> @foreach($article as $art) <div class="head_contents"> <ul class="user"> <li class="top"><a href="{{route('profile',$art->author)}}"><img src="/images/{{$art->user->p_image}}" class="maru"></a></li> <li class="top">{{$art->user->username}}</li> <li class="top"><small>{{$art->created_at->format('Y年m月d日')}}</small></li> </ul> </div> <h1>{{$art->title}}</h1> {{$art->tag}} <br> <like></like> <hr> <p>{!! $art->article !!}</p> @endforeach </div> <div class="menu"> <h5 class="new_article">記事</h5> <div class="new"> @foreach($new as $n) <ul> <li class="new_li"><a href="/article/past/{{$n->id}}" class="titles">{{$n->title}}</a></li> </ul> @endforeach </div> </div> </div> @endsection

Controller

php

public function like(Request $request){ $post_id = $request->id; //post_idが存在しない場合は終わり $post = Article::where('id','=',$post_id)->get(); if (!$post) { return null; } //ログインしているユーザーの情報を取得します $user = Auth::user(); //ユーザーがライクを押しているか $like = $user->likes()->where('post_id', $post_id)->first(); //既に押してるときは何もしない if ($like) { return null; } //初めての押下時は新規にLikeテーブルにレコードを入れます else{ $like = new Like(); } $like->like = 1;//ここで1のみを扱います $like->user_id = $user->id; $like->post_id = $post->id; $like->save(); return null; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Laravel 5

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