时间戳

首页 > 解决方案 > 如何在 vue.js 中以多步形式制作此表单

html - 如何在 vue.js 中以多步形式制作此表单

问题描述

在这里，我为具有三个不同组件的表单编写了代码。那是在一个页面中显示，我想让这个模板像多步表单一样一步一步地出现。例如，当我们在第一个模板时，如果我们单击下一步按钮，那么它应该进入第二个模板，如多步表单。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <section id="app">
      <ul>
        <friend-contact></friend-contact>
        <friend-contact-again></friend-contact-again>
        <friend-contact-once-again></friend-contact-once-again>

      </ul>
    </section>
  </body>
</html>

Vue.js

const app = Vue.createApp({
  data() {
    return {
      
    };
  },
});

app.component('friend-contact', {
  template: `
  <div>
    <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="first_form"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="first_form"><br><br>
  <input type="submit" value="Submit">
  </div>
  
  `,
  data() {
    return {
      fname:'',
      lname:''
    };
  },
});

app.component('friend-contact-again', {
  template: `
  <div>
    <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="second_form"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="second_form"><br><br>
  <input type="submit" value="Submit">
  </div>
  
  `,
  data() {
    return {
        fname:'',
        fname:''
      
    };
  },
});

app.component('friend-contact-once-again', {
  template: `
  <div>
    <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="third_form"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="third_form"><br><br>
  <input type="submit" value="Submit">
  </div>
  
  `,
  data() {
    return {
      fname:'',
      lname:''
      
    };
  },
});
app.mount('#app');

标签： htmlvue.js

解决方案

由于你们三个朋友的联系表单基本相同，我创建了一个 Vue 2 CLI 应用程序，它三次重用相同的表单组件。

我在模板中包含了 HTML 表，只是为了在创建三个联系人后查看联系人列表。

显然，创建联系人后如何处理联系人（发布到数据库等）取决于您。

主页.vue

<template>
  <div class="home">
    <h3>Home</h3>
    <div class="row">
      <div class="col-md-4">
        <button class="btn btn-primary" v-if="!displayForm && !displayTable" @click="showForm">Add Friends</button>
      </div>
    </div>
    <friend-contact-form v-if="displayForm" @save-contacts="saveContacts" />
    <table v-if="displayTable" class="table table-bordered">
      <thead>
        <tr>
          <td>FIRST NAME</td>
          <td>LAST NAME</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(contact, index) in contacts" :key="index">
          <td>{{ contact.firstName }}</td>
          <td>{{ contact.lastName }}</td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-primary" v-if="displayReset" @click="reset">Reset</button>
  </div>
</template>

<script>
  import FriendContactForm from './FriendContactForm'

  export default {
    components: {
      FriendContactForm
    },
    data() {
      return {
        contacts: [],
        displayForm: false,
        displayTable: false,
        displayReset: false
      }
    },
    methods: {
      showForm() {
        this.displayForm = true;
      },
      saveContacts(contacts) {
        //console.log(contacts);
        this.contacts = contacts;
        this.displayForm = false;
        this.displayTable = true;
        this.displayReset = true;
      },
      reset() {
        this.contacts = [];
        this.displayForm = false;
        this.displayTable = false;
        this.displayReset = false;
      }
    }

  }
</script>

FriendContactForm.vue

<template>
  <div class="friend-contact-form">
    <div class="row">
      <div class="col-md-4">
        <hr>
        <h4>Friend {{ currentContactNumber[numContacts] }}</h4>
        <form @submit.prevent="saveContact">
          <div class="form-group">
            <label>First Name</label>
            <input type="text" class="form-control" v-model="contact.firstName">
          </div>
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" class="form-control" v-model="contact.lastName">
          </div>
          <button class="btn btn-primary">{{ formBtnLabel }}</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        contact: {},
        contacts: [],
        maxContacts: 3,
        currentContactNumber: ['One', 'Two', 'Three']
      }
    },
    computed: {
      numContacts() {
        return this.contacts.length;
      },
      formBtnLabel() {
        return (this.numContacts < (this.maxContacts - 1)) ? 'Next' : 'Finish';
      }
    },
    methods: {
      saveContact() {
        if (this.numContacts < this.maxContacts) {
          let contactCopy = { ...this.contact };
          this.resetContact();
          this.contacts.push(contactCopy);
        }

        if (this.numContacts === this.maxContacts) {
          this.$emit('save-contacts', this.contacts)
        }
      },
      resetContact() {
        this.contact = {}
      }
    }
  }
</script>

推荐阅读