は、作成と読み取り操作に同じフォームを使用します。

Question

私は、マスターコンポーネントと子コンポーネントを持っています。子コンポーネントは、編集モードと編集モードのデータを保持します。次のように子コンポーネントが中にあるモード

data() { 
      return { 
       title: '', 
       description: '', 
       organizer: '', 
       startdate: '', 
       enddate: '', 
       email: '', 
       phone: '' 
      } 
     }, 

、私の入力を作成するときに使用されているデータセクションを持つモードを作成し、私が更新しています、編集モードで

<input type="text" placeholder="enter event title here" class="form-control" v-model="title"> 

を次のようにしています

props:['currentevent'] 

currenteventの値は、子コンポーネントにマスタコンポーネントから渡されると、現在値であるされているクライアント上の支柱値以下のように、編集中です。

<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title"> 

<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title"> 

とcurrenteventが空であるかどうか（子コンポーネントで）私の保存方法では、私がチェックしていますが。以下のように、入力値を処理するための完全なコードは次のように見えますそれが空であれば、私はそうでなければ、私は更新コードをトリガするコードを追加トリガします。

質問：これは機能しますが、大きなフォームがあり、すべてのコンポーネントでこれを行う必要がありますが、クリーンなデザインではありません。私は何をすべきか教えてくれますか？

Answer 1

私は本当にあなたの苦境に感謝します。フォームデータを処理する最善の方法は、それを無関係に作成/更新することです。私は明確にするため、それeventObjを呼んでいるこの場合には、単一のオブジェクトに含まれ、代わりに異種のプロパティなど、すべてのデータフィールドを維持する

それらを：：

data() { 
    return { 
     eventObj: {} 
    } 
} 

ここで私は試すことをお勧めしたいものです次に、あなたのマークアップでは、オブジェクトを経由してそれらを参照したい：

<input type="text" placeholder="..." class="form-control" v-model="eventObj.title"> 

あなたは、あなたが編集している場合は親コンポーネントから（オブジェクトとして）データを渡すために小道具を定義する必要があるだろう：

を

props: { 
    currentevent: Object 
} 

そしてあなただけの子コンポーネントのデータに入ってくる小道具をマッピングする必要があるだろう：<input v-model="eventObj.title">のようなあなたの入力が処理されたときに保存されたタイトルは（それが渡されましたがあれば、今すぐ

created() { 
    Object.assign(this.eventObj, this.currentevent || {}) 
} 

currentevent）、フィールドにはフィールドがあらかじめ入力されます。それ以外の場合は空白になります。

これは、あなたが把握しようとしている複雑さを解決するための正しい方向に役立つと思います。この種のものには一般的に他の物流上の問題がありますが、私は黙っていません。 :)

Answer 2

私が見る問題は、フォーム内のv-if/elseを削除することです。ここでは、渡された小道具と同期する子のローカルデータを保持し、フォーム内のローカル変数のみを使用することをお勧めします。

これを行う1つの方法は、小道具にウォッチャーを置くことができ、小道具が変わるたびにローカル変数を更新し、それらの変数のみを形式で使用することができます。

watch: { 
    currentevent: function(newVal){ 
     title = newVal.title,\ 
     description = newVal.description 
     ... 
    } 
}