コントローラでセットした値をVueを通してフォームに表示させる

Question

Vue初心者です。
RailsにVueを導入してDBに保存した値をedit画面にて表示しようと試みています。
この時、コントローラーでセットした @ = Book.find(params[:id])をvue側に渡してフォームに表示させるにはどうしたらよいのでしょうか？
（Bookは　id とname recruiting_periodを持っているとします。）
コントローラの@Bookの値をvue側に表示させる方法がわかりません。

様々なサイトを見たのですが、的確な情報を探し出すことができませんでした。
（APIを作成するしか方法は無いのでしょうか？）

下記のコード内の'123'の部分をコントローラーでセットしたbook.recruiting_periodのようにして表示したいです。
return {recruiting_period: '123'}

<template>
  <div id="recruiting_period">
    <el-date-picker v-model="recruiting_period" format="yyyy-MM-dd hh:mm" type="datetime" name="book[recruiting_period]" placeholder="日時を選択してください"></el-date-picker>
  </div>


</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI, {locale})

  export default {
    name: 'recruiting_period',
    data () {
      return {recruiting_period: '123'}
    }
  }

</script>

ご教授お願いします

Answer 1

普通にJavaScriptとしてビューに書けばいいだけですよ。

例えば、こういうJavaScriptを最終的に出力したいとします。
'123'は、@book.recruiting_periodの値とします。

var value = '123';

コントローラで、@bookにBook.find(params[:id])を入れているとします。
ビュー(xxx.html.erb)では、<%= @book.recruiting_period %>が使えます。
では、こうすればいいですね。

var value = '<%= @book.recruiting_period %>';

Comments

[hiropo]

ご回答ありがとうございます。
return {recruiting_period: '123'}　を　
return {recruiting_period: '<%= @book.recruiting_period %>';
へ書き換えるという認識であっていますでしょうか？
うまく実行できなかったので。。
初歩的な質問で申し訳ございません。

[mingos]

その認識で合っています。
少なくともこちらの環境では実際に試して動作している事を確認しています。
という事は、間違いをされているという事です。

[mingos]

「上手く実行できない」だけでは状況がまったく分からないので、もう少し具体的にお願いします。
例えば、ページを表示した時にエラーが出ているなら確実に何らかのミスがあるので、直せば良いです。
エラーは出ないが意図した通りに実行できないのであれば、ブラウザのソースを表示で最終的なHTMLを確認して、JavaScript部分がどうなっているか見てください。

[hiropo]

ご指摘ありがとうございます。
只今確認したところ、
crhomeのVuedevtoolにてvalueの値を確認したところ、下記の表示となっており取得してきたデータがdatepickerに反映されていない状態です。
value:"<%= @book.recruiting_period %>"
ご教授お願い致します

[mingos]

確認ですが、html.erbで書いていますか？
回答にもありますが、Railsのビュー(xxx.html.erb)でしか動きませんよ。
念のため、turbolinksも無効にしてください。

[hiropo]

説明が不足しており申し訳ございません。
html.erbでは下記のように記述して、質問画面内のVueファイルテンプレートを呼び出しています。
<div data-vue="recruiting_period">
</div>

[mingos]

Vueの事は分かりませんが、
つまり、該当の処理は、RailsではなくただのJavaScriptとして動いているという事で良いでしょうか？
もしそうであれば、Railsのビューの記法は動くはずがないですよね？

[mingos]

まずは、html.erbにこう書いてみてください。
単なる文字として表示できるかどうか、から確認しないと先に進まないと思います。
<div data-vue="recruiting_period">
<%= @book.recruiting_period %>
</div>

[hiropo]

<%= @book.recruiting_period %>
<div data-vue="recruiting_period">
</div>
とすると<%= @book.recruiting_period %>は、DB内の値が表示されます。
<div data-vue="recruiting_period">
<%= @book.recruiting_period %>
</div>
としたときにフォームにその値が表示されない状態です。

[mingos]

今書いてもらっているファイルは、Railsのビューである事は分かりました。

それであれば、
<scritpt>
...
export default {
name: 'recruiting_period',
data () {
return {recruiting_period: '<%= @book.recruiting_period %>'}
}
}
...
</script>
が動かないのは理解できないのですが・・・。
この部分も、html.erbに書いてあるんですよね？

[hiropo]

そちらのscriptタグ内は、html.erbではなく、外部ファイルであるrecruiting_period.vueに記載しています。

[mingos]

そうであれば、<%= %>は使えないので動作しないのは当たり前ですね。
html.erbにしかコントローラで設定した@変数は渡せません。

[hiropo]

ご丁寧な回答ありがとうございます。
この場合、datepickerのフォームにbook.recruting_periodの値を表示するには、
Vueファイルのscriptタグ内にてJSONデータでDBからデータを取得するようにすればよろしいのでしょうか。

[mingos]

そうなると思います。
ここからは普通のJavaScriptとVueの使い方のお話ですね。
RailsはJSONを返すAPIのみを担当するという形になるのではないでしょうか。

[hiropo]

道筋が見えてまりました。
親切に対応していただきありがとうございます。
今後は、質問する際の前提条件なども具体的に記すようにしていこうと思います。

Answer 2

content_tagを使えばerb内でも行けそうな気配がしています。
ただし、data-vueという書き方でうまく動くかは試していません。

// erb
<%= content_tag(:div,  nil, {:"data-vue" => "recruiting_period", :":recruiting_period" => @book.recruiting_period}) %>

のように、htmlタグのattributeになるように記述し、vue側のpropsでそれを受け取ります。

<template>
  <div id="recruiting_period">
    <el-date-picker v-model="recruiting_period_model" format="yyyy-MM-dd hh:mm" type="datetime" name="book[recruiting_period]" placeholder="日時を選択してください"></el-date-picker>
  </div>


</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI, {locale})

  export default {
    name: 'recruiting_period',
    data: {
       // 渡されたものをv-modelは流石にしないほうがいいです
       recruiting_period_model: ""
    }
    props: ["recruiting_period"]
  }

</script>

vue側ではそのpropsを使います。
data-vueでvueと結びつけるのは特殊すぎるので、うまくいくかは保証できませんが、他の方法でも必ずvue側には値を渡せます。
まずはお試しください。

Comments

[hiropo]

ご回答ありがとうござます。
ご指摘のように記すと、datepickerが表示されなくなってしまいました。
datavueで値を渡すのは特殊とのことでしたが、
一般的にはどのような書き方を記すのがよろしいのでしょうか。