VueJSのテンプレートを入れ替えずにフォーム提出を処理する

Question

まず、親切にしてください。

私はVueJSを使って、フローティングヘッダーやフォームの提出などの簡単なことを行うために、VueJSを使用しています。私は、私の連絡フォームが自分のHTML（CMSによってレンダリングされたもの）に表示されるようにマークアップする必要があります.VueJSでフォームの送信を処理していただき、ありがとうございます。したがって、フォームの簡略版はこのようになります。

<contact-form> 

    <form class="contact-form_form"> 

     ... 
     <input name="emailaddress" type="text" /> 
     ... 

     <button></button> 

    </form> 

    <div class="contact-form_thanks"> 
     Thanks for filling in this lovely form 
    </div> 

</contact-form> 

ので、行うには明白なことは、VueJSコンポーネントを作成することですが、私はAxiosを使用して（私はボタンが押されたとき、それはフォームを送信したい、それが新しいテンプレートを導入する必要はありません）フォームを非表示にして、ありがとうメッセージを表示します。

属性ディレクティブとng-show/hideなどを使用してすべての角度でこれを行う方法はわかっていますが、すべてのチュートリアルがSPAおよび単一ファイルコンポーネントに対応しているため、VueJSでこれを行う方法は実際は分かりませんテンプレート付き。

正しい方向へのどんなキックも感謝します。

Answer 1

フォームが送信されたかどうかを示すデータ項目と、v-ifとv-elseのどちらを表示するかを制御するように思えます。

new Vue({ 
 
    el: 'contact-form', 
 
    components: { 
 
    contactForm: { 
 
     data() { 
 
     return { hasBeenSubmitted: false }; 
 
     }, 
 
     methods: { 
 
     doSubmit() { 
 
      console.log("Some behind-the-scenes submission action..."); 
 
      this.hasBeenSubmitted = true; 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<contact-form inline-template> 
 

 
    <div v-if="hasBeenSubmitted" class="contact-form_thanks"> 
 
    Thanks for filling in this lovely form 
 
    </div> 
 

 
    <form v-else class="contact-form_form"> 
 

 
    ... 
 
    <input name="emailaddress" type="text" /> ... 
 

 
    <button @click.prevent="doSubmit">Submit</button> 
 

 
    </form> 
 

 

 
</contact-form>