VueとVue2Editorを使ってリッチテキストの編集画面を作っています。
画面としては
- タイトル入力欄(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が定義されてへんやで」みたいなので、お前〜〜〜〜〜〜となっています。
他に必要な情報がある場合、随時追加しますので指摘をいただければ幸いです。よろしくおねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/02 05:11
2019/02/04 00:59