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

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

ただいまの
回答率

90.51%

  • Node.js

    2354questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    1303questions

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

  • Express

    301questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • Nuxt.js

    205questions

  • axios

    65questions

Nuxt.jsでURLのパラメーターを元に動的に表示させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 183

police

score 2

PHPなどでよくやる「index.php?id=1」の1を変えて動的にページを表示させたいだけなのですが、Nuxt.js難しくてよくわかりません。

Nuxt.js + Express + axios
バージョンはすべて最新です。

URLのパラメーターを元にaxiosでMySQLからデータを引っ張ってきて表示させたいです。
例えば、MySQLで以下のようなTABLEがあったとします。

id    name
1    福沢諭吉
2    夏目漱石
3    野口英世
4    新渡戸稲造
5    樋口一葉


/server/api.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql2/promise');

const mysqlConfig = {
  "host": "localhost",
  "port": 3306,
  "user": "root",
  "password": "",
  "database": "test"
};

router.get('/fuga', async (req, res, next) => {
  try {
    const connection = await mysql.createConnection(mysqlConfig);
    const sql = `SELECT name FROM hoge WHERE id = ?`;
    const [rows] = await connection.query(sql, [req.query.id]);
    connection.end();
    res.send(rows[0]);
  } catch (err) { console.error(err); }
});

module.exports = router;


/pages/index.vue

<template>
  <section>
    id: {{$route.query.id}} &nbsp;&nbsp; name: {{name}}
    <br>
    <br>
    <nuxt-link :to="{'path':'/', 'query':{'id':1}}">ID 1</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':2}}">ID 2</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':3}}">ID 3</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':4}}">ID 4</nuxt-link><br>
    <nuxt-link :to="{'path':'/', 'query':{'id':5}}">ID 5</nuxt-link><br>
  </section>
</template>

<script>
import axios from "axios";

export default {
  async asyncData(context) {
    const nameStr = await axios.get("http://localhost:3000/api/fuga", {
      params: {
        id: context.query.id
      }
    });
    return { name: nameStr.data.name };
  }
};
</script>

<style>
body {
  padding: 10px;
}
</style>


http://localhost:3000/?id=1 にアクセスすると、

id: 1    name: 福沢諭吉 

ID 1 
ID 2 
ID 3 
ID 4 
ID 5 

リンクになっているID 3をクリックすると

id: 3    name: 福沢諭吉 

ID 1 
ID 2 
ID 3 
ID 4 
ID 5 

本来「野口英世」になっていなければならないところが「福沢諭吉」のままです。

画面を遷移させるのではなくて再描画すればいいのかと、watchQueryなどいろいろいじったのですが、どうにもうまくいきません。

どのように書けばいいのでしょうか。。。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

自己解決です。あまり納得いってませんが。

Nuxt.jsでは下記の書き方での動的表示に対応していないもようです。
/?id=1

マニュアルにあるようにこちらのパラメーターの書き方のみになるようです。
/1

なので、ディレクトリ構造を
/index.vue
ではなくて、
/_id/index.vue
にするだけで動的表示は実現できます。

パラメーターが複数、/1/fooなどでアクセスしたい場合は
/_id/_name.vue
となります。

とりあえず今はこちらでも構わないので、これにて閉めさせて頂きます。
でもちょっとダサッw

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • Node.js

    2354questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    1303questions

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

  • Express

    301questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • Nuxt.js

    205questions

  • axios

    65questions