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

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

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

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

Q&A

解決済

1回答

2793閲覧

Vue.js router-link リロードしないと画面が変わらない

Meitoku

総合スコア44

Vue.js

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

0グッド

0クリップ

投稿2021/02/08 14:18

編集2021/02/13 00:47

###途中で投げ出すのはやめましょう
回答者も分からないものは分からないと言う素直さも必要です

###解決したいこと

Vue.jsでrouter-linkでerbファイルで実装されているページに遷移しようと思っています
URLは変わるのですが、画面がリロードしないと変わりません
こちらを参照して、TweetIndexPAge.vueに実装してみましたが変わりませんでした
対処法をよろしくお願いします

###ルーティング
Tweetsコントローラーを、apiと通常のコントローラーで分けています

resources :tweets do collection do get :search end resources :comments,only:[:create,:destroy] resources :likes,only:[:create,:destroy] end namespace :api,{format: 'json'} do namespace :v1 do resources :tweets,only:[:index] end end

###コントローラー
apiを使用してindexアクションでTweetモデルのレコードを取得しています

class Api::V1::TweetsController < ApiController rescue_from ActiveRecord::RecordNotFound do |exception| render json: { error: '404 not found' }, status: 404 end def index @tweets = Tweet.includes(:user).page(params[:page]).per(5).order("created_at DESC") render 'index', formats: 'json', handlers: 'jbuilder' end end

###Jbuilder
Jbuilderでデータの整形を行います

json.array! @tweets do |tweet| json.nickname tweet.user.nickname json.text tweet.text json.school_a tweet.school_a.name json.school_b tweet.school_b.name json.title tweet.title_info json.id tweet.id json.time tweet.created_at.strftime("%Y年%m月%d日 %H時%M分") end

###index.html.erb
views > tweets > index.html.erb

indexページでjsファイルを読み込み

<%= javascript_pack_tag 'tweet_vue' %>

###tweet_vue.js
app.vueをインポートします

import Vue from 'vue' import App from '../app.vue' document.addEventListener('DOMContentLoaded', () => { const el = document.body.appendChild(document.createElement('tweet')) const app = new Vue({ el, render: h => h(App) }) })

TweetIndexPage.vueはindex.html.erbで表示させています
遷移したいページはツイートの詳細ページです
tweets > show.html.erb(/tweets/id)

######----------------------------ここまで追記------------------------------------------

###app.vue
ルートを設定します

<template> <div> <router-view></router-view> </div> </template> <script> import Vue from 'vue' import VueRouter from 'vue-router' import TweetIndexPage from 'TweetIndexPage.vue' const router = new VueRouter({ mode: 'history', routes: [ {path: '/tweets', component: TweetIndexPage} ] }) Vue.use(VueRouter) export default { router } </script> <style scoped> </style>

###TweetIndexPage.vue

<template> <div id="app"> <div v-for="e in tweets" :key="e.id"> <div class="article mt-5"> <router-link :to="`tweets/${e.id}`"> //遷移先へ <div class="article-title"> {{e.school_a}}vs{{e.school_b}} </div> <div class="article-image"> <i class="fa fa-baseball-ball text-white"></i> </div> <div class="sub-title"> {{e.title}} </div> <div class="name"> 投稿者 {{e.nickname}} </div> <div class="tweets_at"> {{e.time}} </div> </router-link> </div> </div> </div> </template> <script> import axios from 'axios'; export default { data: function() { return { tweets: [] } }, mounted() { axios .get('/api/v1/tweets.json') .then(response => (this.tweets = response.data)) }, beforeRouteUpdate (to, from, next) { const url = this.makeUrl(this.baseUrl, to.query); this.fetchUserList(url); next(); }, } </script> </style>

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

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

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

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

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

plasticgrammer

2021/02/09 01:57

この2つのソースからでは、どのアクションで発生する問題なのかがわかりません。 もう少し補足もしくは別ソースの追記をお願いします。 また、追加で確認ですが、TweetIndexPageにあるmakeUrlやfetchUserListは どこで定義されているものでしょうか?
Meitoku

2021/02/09 04:52

依頼ありがとうございます 処理の流れを追記しました makeUrlやfetchUserListは意味がよく分からず貼り付けていたので定義していませんでした 申し訳ありません
Meitoku

2021/02/09 05:47

遷移先のページはVue.jsを一切使っていないのですが、これが原因なのでしょうか?
plasticgrammer

2021/02/09 06:37

遷移前も遷移先もTweetIndexPageコンポーネントで表示という理解で正しいでしょうか。 だとすると、遷移時にはmountedが実行されないからかもしれません。 データの取得をbeforeUpdateやroute変更時などに変えてみれば上手くいくかも。 参考) https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0
Meitoku

2021/02/09 08:45 編集

遷移先はHTML + Railsのみで構成されています Vue.jsの<template>の中に記述しているわけでなく、show.html.erbのファイルのみで作成しています router-linkは遷移先もコンポーネント化?しなければならないのでしょうか
guest

回答1

0

自己解決

Vueではrouter-linkしか使えないと思っていました
普通のerbファイルに移動するなら<a href="">を使えばいい
こんな簡単なのに情報量が少ないですね・・・

投稿2021/02/21 07:28

Meitoku

総合スコア44

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問