前提・実現したいこと
以下のプログラムにある{{ 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

回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。