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

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

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

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

受付中

[Laravel5.5]Laravel Shoppingcart + Vueでのショッピングカート実装について

DaisukeMori
DaisukeMori

総合スコア0

Laravel 5

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

0回答

0評価

0クリップ

2閲覧

投稿2019/02/17 07:30

編集2022/01/12 10:55

現在、Laravel Shoppingcart + Vueについてチュートリアルを進めているのですが、
カートを入れる部分で下記エラーが出てしまいます。

サイトを見ながら同じように進めているのですが、原因がよくわかりません。
チュートリアルサイトの中で「addCart: function(index)」の場所が詳しく書かれていませんでしたが、おそらくVue.jsのmethodだろうと予測し、以下のように書きましたが、こちらで問題ないかも併せて御指南いただければと思います。

[チュートリアルサイト]
リンク内容

error

TypeError: this.$refs.qty is undefined[詳細] products:54:29 addCart http://192.168.10.10/products:54 addCart self-hosted:974 click3VueJS

 
resources/views/products/index.blade.php

html

<html> <head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body style="padding-top: 10px;"> <div id="app"> <div class="container"> <div class="float-right"> カートの中身: <span class="badge badge-pill badge-light" v-text="Object.keys(cartItems).length"></span> </div> <h1>商品一覧</h1> <div class="row"> <div v-for="(product,index) in products" class="col-sm-4"> <div class="card border-info"> <div class="card-body"> <h5 class="card-title" v-text="product.name"></h5> <p class="card-text"> <label>サイズ:</label> <select ref="size" class="form-control"> <option v-for="size in product.sizes" :value="size" v-text="size"></option> </select> </p> <p class="card-text"> <label>個数:</label> <input ref="size" type="number" class="form-control" min="0" value="0"> </p> </div> <div class="card-footer text-right"> <button type="button" class="btn btn-info" @click="addCart(index)">カートへ入れる</button> </div> </div> <br> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script> new Vue({ el: '#app', data: { products: [], cartItems: {} }, methods: { addCart: function(index) { if(confirm('カートへ追加します。よろしいですか?')) { var self = this; var size = this.$refs.size[index].value; var qty = this.$refs.qty[index].value; var product = this.products[index]; var url = '/ajax/carts'; var params = { size: size, qty: qty, productId: product.id }; axios.post(url, params) .then(function(response){ self.cartItems = response.data; }); } }, getProducts: function() { var self = this; axios.get('/ajax/products') .then(function(response){ self.products = response.data; }); } }, mounted: function() { this.getProducts(); } }); </script> </body> </html>

php

namespace App\Http\Controllers\Ajax; use Illuminate\Http\Request; use App\Http\Controllers\Controller; class CartController extends Controller { // 中略 public function store(Request $request) { $product = \App\Product::find($request->product_id); \Cart::add( $product->id, $product->name, $request->qty, $product->amount, ['size' => $request->size] ); return \Cart::content(); }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Laravel 5

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