前提・実現したいこと
LaravelでVue.jsによるSPAの環境を実装してます。
リンクをアクセスすることで、それぞれにvueをの内容にあるModelを表示したいと考えています。
以下のソースコード全般にあるvueを実装しています。
しかし、Commentリンクにアクセス状態でF5キーで更新したら{{ cmt.body }}
の内容がidと一致した項目だけ表示されて一致しなかった項目には「コメントがありません」と表示しますが、
違うリンクに切り替えて再度同じリンクにアクセスしたらv-elseの「コメントがありません」と全ての項目に対して出力されてしまいます。
例
Commentsにアクセスした状態でF5キーで更新
→Stadium Informationをクリックしてアクセス
→再度Commentsにクリックしてアクセス(全てv-elseの内容が表示されてしまう)
ソースコード全般
vue
1## CommentComponent.vue ## 2<template> 3 <div class="col-md-8 col-md-offset-2"> 4 <h3>みんなのコメント</h3> 5 <div v-for="cmt in comment" v-if="cmt.comment_id === id"> 6 {{ cmt.body }} 7 </div> 8 <div v-else> 9 コメントがありません 10 </div> 11 </div> 12</template> 13<script> 14 export default { 15 data() { 16 return { 17 comment: {} , 18 id: this.$route.params.id 19 } 20 }, 21 mounted() { 22 var self = this; 23 var url = '/ajax/comment'; 24 axios.get(url).then(function(response){ 25 self.comment = response.data; 26 }); 27 } 28 } 29</script>
js
1## app.js ## 2window.Vue = require('vue'); 3import VueRouter from 'vue-router'; 4import Info from './components/InfoComponent.vue'; 5import Game from './components/GameComponent.vue'; 6import Comment from './components/CommentComponent.vue'; 7 8Vue.use(VueRouter) 9 10const routes = [ 11 { path: '/stadium/:id/info', name: 'info', component: Info}, 12 { path: '/stadium/:id/game', name: 'game', component: Game }, 13 { path: '/stadium/:id/comment', name: 'comment', component: Comment }, 14]; 15 16const router = new VueRouter({ 17 mode: 'history', 18 routes 19}); 20 21const app = new Vue({ 22 router 23}).$mount('#app');
html
1## show.blade.php ## 2 <div id="app"> 3 <div class="row"> 4 <div class='col-xs-4 col-sm-4'> 5 <router-link :to="{ name: 'info', params: { id: {{ $stadium_post->id }} }}" exact> 6 <button type="button" class="btn btn-block btn-outline-primary"> 7 Stadium Information 8 </button> 9 </router-link> 10 </div> 11 12 13 <div class='col-xs-4 col-sm-4'> 14 <router-link :to="{ name: 'game' }"> 15 <button type="button" class="btn btn-block btn-outline-success"> 16 Game Progress 17 </button> 18 </router-link> 19 </div> 20 21 <div class='col-xs-4 col-sm-4'> 22 <router-link :to="{ name: 'comment', params: { id: {{ $stadium_post->id }} }}"> 23 <button type="button" class="btn btn-block btn-outline-danger"> 24 Comments 25 </button> 26 </router-link> 27 </div> 28 </div>
発生している問題・エラーメッセージ
npm run hot
コマンドでコードを更新したら自動的にバンドルされるようにしていますが、
エラーメッセージは出力していません。
補足情報(FW/ツールのバージョンなど)
Laravel: 5.7
Vue.js: 2.5.17
node: 6.7.0
axios: 0.18
vue-router: 3.0.2
リンクを切り替えてもv-elseに行かず、正常にModelの内容を表示できるようにするにはどうしたら良いでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/19 10:57 編集
2019/04/19 11:00
2019/04/19 17:41
2019/04/20 00:59 編集
2019/04/20 06:47 編集
2019/04/20 12:21
2019/04/20 12:24
2019/04/21 11:20
2019/04/21 13:07