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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

Q&A

解決済

1回答

2695閲覧

Vue.jsのコンポーネントから値を取得できない

perpouh

総合スコア299

Vue.js

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

0グッド

0クリップ

投稿2019/02/01 09:56

VueVue2Editorを使ってリッチテキストの編集画面を作っています。
画面としては

  • タイトル入力欄(input[type='text'])
  • 本文入力欄(Vue2Editor)

があるだけの簡単なものなのですが、Vue2Editorに入力された値を取得できなくて困っています。

component/richtext_editor.vue

Vue

1<template> 2 <div id="editor"> 3 <vue-editor v-model="content"></vue-editor> 4 </div> 5 </template> 6 7 <script> 8import { VueEditor } from "vue2-editor"; 9 10export default { 11 components: { 12 VueEditor 13 }, 14 15 data() { 16 return { 17 content: "<h1>Some initial content</h1>" 18 }; 19 } 20}; 21</script>

richtext_editor_vue.js

js

1import RichTextEditor from './components/richtext_editor.vue' 2var richtext = new Vue({ 3 el: '#editor', 4 components: { 5 RichTextEditor 6 } 7});

edit.html.erb(本体はRubyですがそもそも関係無さそう)

html

1 <div class="field" id="editor"> 2 <vue-editor v-model="content" placeholder="本文を入力してください"></vue-editor> 3 </div> 4 <input type="hidden" name="article[body]" v-model="content"> 5<%= javascript_pack_tag 'richtext_editor_vue' %>

この記述で、気持ちとしてはv-model="content"にうまいこと値がバインドされるのかな〜と思っていたのですが、バインドされず。

こんな感じのエラーが出ます。

console

1vue.self-e1d27091efe26822fbd6902c25374310332f77acc27c8bd1c658612837d05756.js?body=1:617 2[Vue warn]: Property or method "content" is not defined on the instance but referenced during render. 3Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. 4 5(found in <Root>)

エラー文じたいの英語はまあ言ってることはわかるんですけど、content定義したじゃん……?となっている状態です。
そもそもコンポーネントのmodelとコンポーネント外のmodelは連動していない?と思ってinput[type='hidden']側のmodelを変えてみたのですが、出たエラーは「contentが定義されてへんやで」みたいなので、お前〜〜〜〜〜〜となっています。

他に必要な情報がある場合、随時追加しますので指摘をいただければ幸いです。よろしくおねがいします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

edit.html.erbのテンプレートはrichtext_editor_vue.jsでコンパイルされるので、richtext_editor_vue.js内でcontent が定義されてないため未定義エラーが出ます。

edit.html.erbでは<input type="hidden" name="article[body]" v-model="content"><div class="field" id="editor">...</div>の外側にあるのでVueのテンプレートコンパイラーでコンパイルされません。内側に入れなければなりません。

あとはv-model周りのやり取りに注意したら下記のような感じでどうかなと思います。

component/richtext_editor.vue

vue

1<template> 2 <div> 3 <vue-editor v-model="content" :placeholder="placeholder" @input="onInput" /> 4 </div> 5</template> 6 7<script> 8import { VueEditor } from "vue2-editor"; 9 10export default { 11 components: { 12 VueEditor 13 }, 14 15 props: { 16 value: { 17 type: String, 18 required: true 19 }, 20 placeholder: { 21 type: String, 22 default: "" 23 } 24 }, 25 26 data() { 27 return { 28 content: this.value 29 }; 30 }, 31 32 methods: { 33 onInput(value) { 34 this.$emit("input", value); 35 } 36 } 37}; 38</script>

richtext_editor_vue.js

js

1import RichTextEditor from "./components/richtext_editor.vue"; 2 3var richtext = new Vue({ 4 el: "#editor", 5 data() { 6 return { 7 content: "<h1>Some initial content</h1>" 8 }; 9 }, 10 components: { 11 RichTextEditor 12 } 13});

edit.html.erb

erb

1 <div class="field" id="editor"> 2 <div><!-- div で囲まないと↓のinputが消える…? --> 3 <rich-text-editor v-model="content" placeholder="本文を入力してください" /> 4 </div> 5 <input type="hidden" name="article[body]" :value="content" /> 6 </div> 7<%= javascript_pack_tag 'richtext_editor_vue' %>

投稿2019/02/01 12:52

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

perpouh

2019/02/02 05:11

丁寧な回答、ソースコードまでありがとうございました!コンパイルの仕組みを根本的に勘違いしてるっぽいことがわかったので、いただいたソースを手掛かりにきちんと調べなおそうと思います。
perpouh

2019/02/04 00:59

無事に動作確認が取れました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問