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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

7044閲覧

Vue.js で新規作成画面と編集画面でフォームを共通化したい

issei126

総合スコア108

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/03/03 11:41

編集2018/03/03 11:45

Vue.js を使って新規作成画面と編集画面で共通のフォームを持つアプリケーションを作りたいと考えています。
データはバックエンドのAPIを通じて保存する想定です。
フォーム部分は同じものを使うのでフォームをコンポーネント化すればよいのではと考えています。

新規作成と編集ではリクエストするバックエンドのAPIが異なるため、新規作成コンポーネントと編集コンポーネントを作成し、
それぞれからフォームコンポーネントを通じてデータを変更し、親コンポーネント側でAPIリクエストをするという形で考えています。
そのように考えたときにデータの受け渡しはどう行うのかがよいのかわかりませんでした。

親子間通信は公式ページにもある通り,

親側

  • data を更新するメソッドを用意する
  • v-onで子のイベントと親のメソッドを紐付ける

子側
- フォームに入力された時、 $emit を利用してv-onで上記のメソッドを発火させる

というやり方が検索してもよくでてきます。

この方法だと子コンポーネントであるフォームに多くのプロパティが渡された場合、
例えばユーザの登録・編集で「名前/住所/電話番号」を入力させる場合、
その数だけ親メソッドには更新するメソッドを追加するなどしなくてはいけなくなると考えています。
それはすこし煩雑ではないかなと感じています。

他にすっきりとしてやり方があるのか教えていただきたいです。
またそもそも「共通フォームはコンポーネントにする」という考え方が間違っているのでしょうか?

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

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

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

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

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

guest

回答1

0

自己解決

ひとつ自分で解決策を発見しました。
渡したいプロパティをまとめてオブジェクトとして子コンポーネントに渡し、
子子コンポーネントではそれぞれのプロパティでv-modelでバインドすればよさそうです。
このようにすればformコンポーネントは使いまわせます。
https://codepen.io/issei126/pen/KQYbON/

HTML

1<div id='new'> 2 <h1>New User info</h1> 3 <span>{{user.name}}</span><br> 4 <span>{{user.tel}}</span><br> 5 <span>{{user.address}}</span><br> 6 7 <my-form v-bind:user='user'></my-form> 8</div> 9 10<div id="edit"> 11 <h1>Edit User info</h1> 12 <span>{{user.name}}</span><br> 13 <span>{{user.tel}}</span><br> 14 <span>{{user.address}}</span><br> 15 16 <my-form v-bind:user='user'></my-form> 17</div>

JavaScript

1Vue.component('my-form', { 2 'template': ` 3<form> 4<label>Name</label><input v-model="user.name"><br> 5<label>Tel</label><input v-model="user.tel"><br> 6<label>Address</label><input v-model="user.address"><br> 7</form> 8`, 9 "props":['user'], 10 11}) 12 13const newApp = new Vue({ 14 el:"#new", 15 data: { 16 user: { 17 name: '', 18 tel: '', 19 address: '' 20 } 21 } 22}) 23 24const editApp = new Vue({ 25 el:"#edit", 26 data: { 27 user: { 28 name: 'Someone', 29 tel: 'Some Number', 30 address: 'Some Address' 31 } 32 } 33}) 34

投稿2018/03/04 02:23

編集2018/03/04 02:25
issei126

総合スコア108

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問