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

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

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

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

Laravel 5

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

Q&A

解決済

1回答

661閲覧

Vue.jsで動的に作成したリストでデータをバインディングしたい

fujisan

総合スコア7

Vue.js

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

Laravel 5

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

0グッド

0クリップ

投稿2018/04/08 06:34

編集2018/04/08 08:35

初歩的な質問になるかもしれませんがよろしくお願いします。
laravelのbladeとVueでカートのようなページを作成しています。
アイテムの数だけリストを回したいのですがこのcountの要素を
count1、count2とアイテムの数だけ動的に変えてjs内のdataとバインディングしたいのですが上手くいきません。
単純に{{count1}}や{{count2}}と書いた場合にバインディングされるのは確認しています。
文字列の操作で色々試しましたが結果が11となったりエラーが起きたりでダメでした。
分かる方いましたらお助けください。

追記
私が根本的におかしいことをしているかもしれませんので、実現したいことを追記します。
アイテムが複数(数は変動します)ありそれぞれに購入個数{{count*}}とプラスマイナスボタンがあり、ボタンを押すと対応したdata内の変数が加減されてそれぞれの{{count*}}の数値と連動するようにしたいです。
現状は{{count*}}この部分に変数を埋め込めないのでアイテムが複数あっても全て共通になってしまいます。
これが実現できれば全く異なる方法でも構いません。
よろしくお願いします。

php

1<div id="app"> 2 <ul> 3 <li v-for="item items" class="item-container"> 4 <div class="item-name">@{{item.name}}</div> 5 <div class="item-price">@{{item.price}}</div> 6 <div class="item-count">@{{count***}}</div> 7 <button class="plus">+</button> 8 <button class="minus">-</button> 9 </li> 10 </ul> 11</div> 12省略

js

1new Vue({ 2 el: "#app", 3 data: { count1: 1, count2: 5, count3: 0, count4: 2...}, 4 省略

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんな感じでどうでしょうか?

new Vue({
el: "#app",
data: {items:[
{name: 'name1',price:1, count:1},
{name: 'name2',price:1, count:2},
]},
以下省略です。

【修正】countの箇所誤解してましたので修正しました。
普通になっちゃいましたけど、これではだめかな?

投稿2018/04/08 08:47

編集2018/04/08 09:06
euledge

総合スコア2404

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

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

fujisan

2018/04/08 09:18

回答ありがとうございます。ですが私の理解力が低いのでわかりませんでした。この場合bladeの方はどう書けばいいのでしょうか?繰り返しの部分でどうかけばループごとに違うcountを設定できるのかがわかりません。。。
fujisan

2018/04/08 09:28

教えていただいた通りdataを配列にして回したら解決しました!Vueを始めたばかりで壁にぶつかりまくっているのでまたお世話になるかもしれません、ありがとうございました^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問