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

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

ただいまの
回答率

89.22%

vue.jsでサーバーへpostを行いたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,035

yf4021

score 10

前提・実現したいこと & 発生している問題

vue.jsでサーバーにpostを行いたいと思っています。getは行えます。
vue.jsでのpostの方法としてイメージしている流れとしては、以下のように考えています。

①getしたページでformをtemplateに埋め込む
②formがsubmitされた時にmethodに値を渡す
③axios.postで値をpostする

現在、②の部分でつまづいており、formに仕込んだv-on:click='method'がうまく発火しないようで困っています。
今回vue.jsでssrをするにあたって、以下のページを参考にしました。
Vue SSR ガイド

postの実装については以下のサイトも参考にしました。
Vue.jsでGETとPOSTを実装する
Vue.jsで配列の値をAPIでPOSTする方法

詳細なコードは以下に掲載します。

ディレクトリの構造は以下の通りです。
---- app dir
|- index.js
|- package.json
|- package.lock.json
|- index.template.html
|- node-modules

該当のソースコード

// index.js
const Vue = require('vue')
const express = require('express')
const server = express()
const fs = require('fs')

const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

server.get('/', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    // @click='clickEvent()'を仕込む
    template: `
      <div>
        <div>Hello World</div>
        <button @click='clickEvent()'>click this</button>
      </div>
    `,
    methods: {
      clickEvent: function() {
        // buttonがクリックされても表示されない = methodが発火していない
        console.log('clicked')
      }
    }
  })
  const context = {
    title: 'hello'
  }
  // render the vue instance to HTML
  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      console.log(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

server.listen(8080, '127.0.0.1')
console.log('server is running at http://127.0.0.1:8080')
<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

package.jsonは以下の通りです。

{
  "name": "vue_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.16.4",
    "fs": "0.0.1-security",
    "vue": "^2.5.21",
    "vue-server-renderer": "^2.5.21"
  }
}


http://127.0.0.1:8080/ にアクセスすると、以下のように表示されます。
イメージ説明

ここでclick thisを押しても、methodsのclickEvent()に配置されたconsole.log('clicked')がターミナル上に表示されないので(検証のconsoleにも表示されません)、clickEvent()まで到達していない様子です。

chromeの検証では以下のように表示され、buttonにonclickがないことがわかります。

イメージ説明

templeteに仕込んだv-on:clickが正常に動作するにはどのように対処すれば良いのでしょうか?

試したこと

ここに問題に対して試したことを記載してください。
以下のページを参考に、vue-cliも利用してみました。
Vue.js を vue-cli を使ってシンプルにはじめてみる

ここで作成された、app-directory/src/componentsにあるvueファイルでも同様に、
v-on:clickでbuttonを作成し、同一ファイル上のscriptにmethodを定義したのですが、
こちらでは正常に動き、chromeのconsoleにログを確認できました。

フロントのbuttonでフロントのmethodsは発火させることはできるが、
フロントのbuttonでサーバー側で定義されているmethodsを発火させることはできない、といったことがあるのでしょうか?

補足情報

再現は以下の順序を辿って簡単にできると思います。
①npm init
②npm install vue --save
③npm install vue-server-renderer --save
③npm install express --save
④npm install fs --save
⑤npm install
⑥上記のindex.jsを用意する
⑦上記のindex.template.htmlを用意する
⑧node index.jsでサーバーを起動する
⑨http://127.0.0.1:8080/にアクセス

バージョンなど

nodeのバージョン
v10.1.0

npmのバージョン
5.6.0

vueのバージョン
2.9.3

OS
macOS Mojave version 10.14

vagrantなどの仮想環境は利用していません。

どなたかお分かりになる方がいらっしゃいましたら、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

  • ただいまの回答率 89.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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