LoginSignup
4
6

More than 5 years have passed since last update.

vue.jsにrailsのviewからユーザーが入力していない値を渡す方法

Last updated at Posted at 2018-01-08

つまりどころ

vue.jsの仕様のひとつにv-modelのついたformの初期値とvalueを無視するというのがある。railsのviewから値を渡す際にいつもview内で変数を初期値に設定してhiddenで隠し、まとめて渡すことでユーザーが入力しない情報(例えばどこのページかuser_idなど)を渡していた。そのため渡す方法を探していたのだがやっといい方法が見つかったのでメモ。

pure jsで渡す

inputの場合

vue.jsはpure jsもかけるのでpure jsでformを通してviewからjsファイルに渡す。

form.erb
<input type="text" id="form_board_id" value="<%= @post.id %>" class="hidden">
form.js
var form_board_id = document.getElementById("form_board_id").value;

これで渡せる。

document.が全体を探し出すという意味でgetElementByIdがカッコ内のidのついたformの値を受け取る。それを.valueで値に変換している。

textareaの場合

なぜかtextareaの場合はvalueに値を入れても飛ばせなかった。

form.erb
<textarea class="hidden" id="form_board_id"><%= @post.id %></textarea>
form.js
var form_board_id = document.getElementById("form_board_id").value;
4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6