前提・実現したいこと & 発生している問題
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
該当のソースコード
javascript
1// index.js 2const Vue = require('vue') 3const express = require('express') 4const server = express() 5const fs = require('fs') 6 7const renderer = require('vue-server-renderer').createRenderer({ 8 template: fs.readFileSync('./index.template.html', 'utf-8') 9}) 10 11server.get('/', (req, res) => { 12 const app = new Vue({ 13 data: { 14 url: req.url 15 }, 16 // @click='clickEvent()'を仕込む 17 template: ` 18 <div> 19 <div>Hello World</div> 20 <button @click='clickEvent()'>click this</button> 21 </div> 22 `, 23 methods: { 24 clickEvent: function() { 25 // buttonがクリックされても表示されない = methodが発火していない 26 console.log('clicked') 27 } 28 } 29 }) 30 const context = { 31 title: 'hello' 32 } 33 // render the vue instance to HTML 34 renderer.renderToString(app, context, (err, html) => { 35 if (err) { 36 console.log(err) 37 res.status(500).end('Internal Server Error') 38 return 39 } 40 res.end(html) 41 }) 42}) 43 44server.listen(8080, '127.0.0.1') 45console.log('server is running at http://127.0.0.1:8080')
html
1<!-- index.template.html --> 2<!DOCTYPE html> 3<html lang="en"> 4 <head> 5 <title>{{ title }}</title> 6 </head> 7 <body> 8 <!--vue-ssr-outlet--> 9 </body> 10</html>
package.jsonは以下の通りです。
json
1{ 2 "name": "vue_test", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "MIT", 11 "dependencies": { 12 "express": "^4.16.4", 13 "fs": "0.0.1-security", 14 "vue": "^2.5.21", 15 "vue-server-renderer": "^2.5.21" 16 } 17}
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などの仮想環境は利用していません。
どなたかお分かりになる方がいらっしゃいましたら、よろしくお願いいたします。
あなたの回答
tips
プレビュー