Question

首先，请善待。我是VueJS的新手来自Angular世界，那里的情况有所不同; - ）

我正在创建一个使用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等方面完成所有这些操作但是在VueJS中无法真正看到如何执行此操作，因为所有教程都适用于单独的SPA和单个文件带有模板的组件。

任何正确方向的踢都将不胜感激。

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>

处理表单提交而不替换VueJS中的模板

1 个答案: