vuejsでajaxと連携するフォームコンポーネントを取得する

私はフォームであるvuejsコンポーネントを持っています。それは1つのフィールド "電子メール"を持っています。 "email"という名前の小道具として親からコンポーネントに与えられた場合の "email"のデフォルト値。ユーザーがフォームを送信すると、親が「電子メール」の更新された値を取得できるように、イベントを起動する必要があります。vuejsでajaxと連携するフォームコンポーネントを取得する

だから、これは

<parent> 
    <child :email="email" /> 
</parent>

のように見えますが、今の問題は、私の子供のオブジェクトであるように見えます：

{ 
    props: ['email'], 
    data() {return {d_email: this.email} 
}

問題は、私は常に、フォームフィールドにNULL値を見ています、です。私の入力フォームタグはこのようになりますので、これは起こっているようだ：私は値=「メール」を使用しない場合

<input type="text" v-model="d_email" :value="email" />

、その後、子コンポーネントが更新されないとき、親で電子メールの値が変化これは必要です。

しかし、フォームの送信時に入力変更を親に返す必要があるため、入力値をどこかに格納する必要があります。私はそのためにd_emailを使用しています。

ただし、子が最初にレンダリングされるとき、propメールはnullであるため、d_emailはnullに初期化されます。つまり、vモデルのために、inoutフィールドは常にnullを示します。

ここで推奨されるアプローチは何ですか？

updateemailは、イベントの名前であると setemailが上の方法である

<child :email="email" v-on:updateemail="setemail"></child>

：親があなたのような子コンポーネントへのリンクを追加する必要が拾うだろうというイベントを発射する

出典

2017-07-01 Amit

子供の場合は、emailのプロパティを見てください。

{ 
    props: ['email'], 
    data() {return {d_email: this.email}, 
    watch:{ email(newEmail){ this.d_email = email }} 
}

監視された値を使用すると、親の変更時にローカルメール変数が更新されます。

出典

2017-07-01 22:21:53 Bert

なぜか分かりませんが、計算されたプロパティが動作するときにウォッチでドキュメントがダウンしています：「他のデータに基づいて変更する必要のあるデータがあると、ウォッチを酷使することが魅力的です。 AngularJSのバックグラウンドから来ていますが、必須のウォッチコールバックではなく、計算されたプロパティを使用する方が良いことがよくあります。 " –

@ MarkM通常、私は同意するかもしれません。しかし、この場合、 'v-model'のソースであるローカル' d_email'を持っていますので、 'get'があなたの答えに示唆したものであるget/set計算が最低限必要です。 $ emit。しかし、彼は 'フォーム'が提出するときに親を更新することを記述しています。つまり、（私にとっては）必ずしも*即座に値を出すとは限りません。その場合、私は計算された時計をお勧めします。 – Bert

イベントが発生したときに呼び出されるparent。親が小道具を更新するとき、それは更新しなければならないことで

computed: { 
    d_email: function(){ return this.email } 
}

：あなたはこのようなd_email計算されたプロパティを確認する必要があり、子供には

。

<html> 
    <head> 
     <script src=" https://unpkg.com/vue"></script> 
    </head> 
    <body> 
    <div id="app"> 
     <parent></parent> 
    </div> 


    <script> 
     Vue.component('parent', { 
      template: '<child :email="email" v-on:updateemail="setemail"></child>', 
      data: function(){ 
       return { 
        email: "[email protected]" 
       } 
      }, 
      methods: { 
       setemail: function(e){ 
        console.log("email changed to: ", e) 
        this.email = e 
       } 
      } 
     }); 

     Vue.component('child', { 
      template: '<input id="emailinput" type="text" v-model="d_email" v-on:input="updateemail">', 
      props: ['email'], 
      methods: { 
       updateemail: function(e) { 
        this.$emit("updateemail", e.target.value) 
       } 
      }, 
      computed: { 
       d_email: function(){ return this.email } 
      } 

     }); 
     new Vue({ 
      el:'#app', 
     }); 

    </script> 
    </body> 
    </html>

コンソールを見て、あなたは両親がユーザーの種類として更新取得財産をメールで表示されます。一緒にすべてを置く

はあなたにこのような何かを与えるだろう。これがサーバに当たっている場合は、ユーザがタイプではなくサブミットしたときにイベントを発生させたいと思うかもしれませんが、それは簡単な変更です。

出典

2017-07-01 22:19:53

このルートを下る場合は、計算で 'set'値を使用し、' @ input'と 'updateemail'を全く避けてください。 'd_email：{get（）{return this.email}、set（v）{this。$ emit（ 'updateemail'、v）}}'。 – Bert

これは素晴らしい@bert-evansです。 –

vuejsでajaxと連携するフォームコンポーネントを取得する

答えて

関連する問題