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

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

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

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

Q&A

解決済

3回答

931閲覧

Vue.jsでLaravelのパラメータから取得したデータをv-ifで条件分岐させたい

ddkk

総合スコア37

Vue.js

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

0グッド

0クリップ

投稿2019/04/05 16:34

前提・実現したいこと

以下のプログラムにある{{ id }}/:id/showのようなLaravelのルートにあるidのパラメータを使い、v-ifで条件分岐させたいと思っています。
Webpackでバンドルしようとするとエラーが発生してしまい、<div>{{ std.id }}</div>内にデータが表示されません。
idにはstd.idのリスト内に同じ値が入っており、{{ std.id }}の内容が出力されるようになるプログラムですができておりません。

vueファイル

1<template> 2 <div class="col-md-8 col-md-offset-2"> 3 <div v-for="std in stadium"> 4 <div v-if="std.id === {{ id }}"> 5 <div>{{ std.id }}</div> 6 </div> 7 </div> 8 </div> 9</template> 10<script> 11 export default { 12 data() { 13 return { 14 stadium: {} , 15 id: this.$route.params.id 16 } 17 }, 18 mounted() { 19 var self = this; 20 var url = '/ajax/stadium'; 21 axios.get(url).then(function(response){ 22 self.stadium = response.data; 23 }); 24 } 25 } 26</script>

発生している問題・エラーメッセージ

npm run hotコマンドでコードを更新したら自動的にバンドルされるようにしていますが、
以下のようなエラーが発生します。

WAIT Compiling... 17:28:30 ERROR Failed to compile with 1 errors 17:28:31 error in ./resources/js/components/StadiumComponent.vue?vue&type=template&id=5705002a& Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: invalid expression: Unexpected token { in std.id === {{ id }} Raw expression: v-if="std.id === {{ id }}" 2 | <div class="col-md-8 col-md-offset-2"> 3 | <div v-for="std in stadium"> 4 | <div v-if="std.id === {{ id }}"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ 5 | <div>{{ std.id }}</div> 6 | </div> @ ./resources/js/components/StadiumComponent.vue?vue&type=template&id=5705002a& 1:0-220 1:0-220 @ ./resources/js/components/StadiumComponent.vue @ ./resources/js/app.js @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./resources/js/app.js ./resources/sass/app.scss

補足情報(FW/ツールのバージョンなど)

Laravel: 5.7
Vue.js: 2.5.17
node: 6.7.0
axios: 0.18
vue-router: 3.0.2

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

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

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

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

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

guest

回答3

0

ありがとうございます!
単純なミスに気がつきませんでした????

投稿2019/04/06 12:20

ddkk

総合スコア37

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

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

0

ありがとうございます!
単純なミスに気がつきませんでした????

投稿2019/04/06 09:04

ddkk

総合スコア37

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

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

0

ベストアンサー

vue

1<div v-if="std.id === {{ id }}">

文法間違いが原因かと思います。

vue

1<div v-if="std.id === id">

投稿2019/04/05 17:16

yhg

総合スコア2161

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問