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

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

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

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

325閲覧

Vue.jsでSPAによるリンクを切り替えたらv-elseの内容が全て表示されてしまう

ddkk

総合スコア37

Vue.js

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2019/04/18 13:14

編集2019/04/18 13:18

前提・実現したいこと

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の内容を表示できるようにするにはどうしたら良いでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

まだちゃんと見てないですが、以下、対応してみてもらえませんか?
キー付き v-for
v-for と一緒に v-if を使うのを避ける

投稿2019/04/18 14:56

wtokuno

総合スコア448

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

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

ddkk

2019/04/19 10:57 編集

まだきちんとドキュメントは理解できていませんが、 以下のようにvueを編集しました。 しかし、事象は解決できておりません。 <template> <div class="col-md-8 col-md-offset-2"> <h3>みんなのコメント</h3> <ul> <li v-for="cmt in comment" v-if="cmt.comment_id === id" :key="cmt.id" > {{ cmt.body }} </li> </ul> </div> </template>
wtokuno

2019/04/19 11:00

「v-for と一緒に v-if を使うのを避ける」というのは「一つのタグの中に v-for と v-if を書くな」という意味です。
ddkk

2019/04/19 17:41

以下のように書いたことでリンクの切り替えでもModelの内容が表示されるようになりました。 <template> <div class="col-md-8 col-md-offset-2"> <h3>みんなのコメント</h3> <ul> <div v-for="cmt in comment" :key="cmt.id" > {{ cmt.body }} </div> </ul> </div> </template> しかし、私がやりたいのはcomment_idと同じidのものだけ表示させるため、条件分岐を使用したいと考えています。 なので、指摘通りv-forとv-ifをタグを分けて書きましたが問題は解決しておりません。 <template> <div class="col-md-8 col-md-offset-2"> <h3>みんなのコメント</h3> <ul> <div v-for="cmt in comment" :key="cmt.id" > <li v-if="cmt.comment_id === id" > {{ cmt.body }} </li> </div> </ul> </div> </template>
wtokuno

2019/04/20 00:59 編集

「v-for と一緒に v-if を使うのを避ける」に書かれている、下記のパターンにまさしく該当すると思いますがなぜこの通りにしないのでしょう?「算出プロパティ」が分からない? > リスト内のアイテムをフィルタする(例: v-for="user in users" v-if="user.isActive")。このような場合は、フィルタリングされたリストを返却する算出プロパティに users を置き換えてください(例: activeUsers)。
ddkk

2019/04/20 06:47 編集

やっと算術プロパティを理解しました。お手数おかけしまして申し訳ありません。 しかし、以下のようにブラウザ上でエラーが発生します。 [Vue warn]: Error in render: "TypeError: this.comments.filter is not a function" TypeError: this.comments.filter is not a function ソースコードは以下のように編集しました。 <template> <div class="col-md-8 col-md-offset-2"> <h3>みんなのコメント</h3> <ul> <li v-for="cmt in Comments" :key="cmt.id" > {{ cmt.body }} </li> </ul> </div> </template> <script> export default { data() { return { comments: {} } }, computed: { Comments: function () { return this.comments.filter(function (cmt) { return cmt.comment_id === this.$route.params.id }) } }, mounted() { var self = this; var url = '/ajax/comment'; axios.get(url).then(function(response){ self.comment = response.data; }); } } </script>
wtokuno

2019/04/20 12:21

filterは配列のメソッドなので comments の値が配列でないといけません。 - 以下の部分で、comments にオブジェクトが設定されてしまっています。 data() { return { comments: {} } }, - 以下の部分で、response.data が配列かどうか確認してください。 axios.get(url).then(function(response){ self.comment = response.data; });
wtokuno

2019/04/20 12:24

よく見たら ajax で取ってきたデータを設定しているプロパティが comment になってますね。 self.comment -> self.comments
ddkk

2019/04/21 11:20

以下のようにしましたが、今度はidが取得できなくなってしまいました。 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined" TypeError: Cannot read property 'id' of undefined ソースコード <template> <div class="col-md-8 col-md-offset-2"> <h3>みんなのコメント</h3> <ul> <li v-for="cmt in Comments" :key="cmt.id" > {{ cmt.body }} </li> </ul> </div> </template> <script> export default { data() { return { comments: [], id: this.$route.params.id } }, computed: { Comments: function () { return this.comments.filter(function (cmt) { return cmt.comment_id === this.id }) } }, mounted() { var self = this; var url = '/ajax/comment'; axios.get(url).then(function(response){ self.comments = response.data; }); } } </script> 何度も申し訳ありません。
wtokuno

2019/04/21 13:07

以下の this.id の this が undefined になっています。 mounted() でやっているように this を別の変数に代入してそれを使うようにするか、アロー関数を使うなどしてください。 return this.comments.filter(function (cmt) { return cmt.comment_id === this.id })
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問