如何在vue js中提示类别指定的表单

SULTAN 发表于 Dev

苏丹

在第一步表单中，我们有一个字段类别字段。

如果用户基于此输入“房地产”，则需要在第二步中用一些输入字段（如“总房间”，“平方英尺”）提示房地产表单。
如果用户基于该类别输入“ IT培训”，则需要在第二步中使用一些输入字段（如“位置”，“薪水”）来提示IT培训表单。

我已经通过使用onchange事件从第一种形式捕获类别来尝试了很多。我写了一个条件，但是如何根据用户的需要在用户进入后调用该特定的第2步表单也提示用户指定了表单。

       onChange(event) {
        var category = event.target.value
        if (category == "Real Estaste"){
        // Here I need to propt real estate form with some fields 
        // example fields are total rooms, square_ft.
      },

这是一个多步骤表单的示例代码，请帮助我实现这一目标，谢谢。

<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<html lang="en">
   <head>
      <title>Multistep Form In VueJs</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
      <h3 class="text-success" align="center">Multistep Form In VueJs</h3>
      <br>
      <div class="container" id="app">
         <div class="panel-group">
            <div class="panel panel-primary">
               <div class="panel-heading">Multistep Form In VueJs</div>
               <form class="form-horizontal" action="/action_page.php">
               
                  <fieldset v-if="step == 1">
                     <div class="panel-body">
                        <h4>Step 1: Search for category</h4>
                        <br>
                        <div class="form-group">
                           <div class="col-sm-5">
                              <input style="width: 93%;" type="text" v-model="category" @change="onChange($event)" placeholder="Search your category"
                      name="category" maxlength="200" id="id_post_type">
                           </div>
                        </div>
                        <button @click.prevent="next()" class="btn btn-primary">Next</button>
                     </div>
                  </fieldset>
                  
                  
                  <fieldset v-if="step == 2">
                     <div class="panel-body">
                        <h4>Step 2: If you type school in category prompt this form</h4>
                        <br>
                        <div class="form-group">
                           <label class="control-label col-sm-2" for="fname">First Name:</label>
                           <div class="col-sm-5">
                              <input type="text" class="form-control" v-model="fname" name="fname">
                           </div>
                        </div>
                        <div class="form-group">
                           <label class="control-label col-sm-2" for="lname">Last Name:</label>
                           <div class="col-sm-5">
                              <input type="text" class="form-control" v-model="lname" name="lname">
                           </div>
                        </div>
                        <button @click.prevent="prev()" class="btn btn-info">Previous</button>
                        <button @click.prevent="next()" class="btn btn-primary">Next</button>
                     </div>
                  </fieldset>
                  
                  
                  <fieldset v-if="step == 3">
                     <div class="panel-body">
                        <h4>Step 3: If you type college in category prompt this form</h4>
                        <br>
                        <div class="form-group">
                           <label class="control-label col-sm-2" for="mobno">Mobile Number:</label>
                           <div class="col-sm-5">
                              <input type="text" class="form-control" v-model="mobno" name="mobno">
                           </div>
                        </div>
                        <div class="form-group">
                           <label class="control-label col-sm-2" for="address">Address:</label>
                           <div class="col-sm-5">
                              <textarea  class="form-control" name="address" v-model="address"></textarea>
                           </div>
                        </div>
                        <button @click.prevent="prev()" class="btn btn-info">Previous</button>
                        <button @click.prevent="submit()" class="btn btn-success">Save</button>
                     </div>
                  </fieldset>
               </form>
            </div>
         </div>
      </div>
      
<script >
   var app = new Vue({
     el: '#app',
     data: {
           step:1,
           category:'',
           fname:'',
           lname:'',
           mobno:'',
           address:'',
       },
   methods:{
       onChange(event) {
        var category = event.target.value
        if (category == "Real Estaste"){
        // Here I need to propt real estate form with some fields 
        // example fields are total rooms, square_ft.
      },
       prev() {
           this.step--;
       },

       next() {
           this.step++;
       },  
       submit() {
           alert('Form Is Submitted.');      
       }   
   }  
    })
</script>
</body>
</html>

磨碎

最简单的方法是在v-if内部添加内容，<fieldset v-if="step == 2">因为您已经category在第一步中获得了数据，这些数据将控制下一步显示的内容。

<fieldset v-if="step == 1">
  // html of step 1
</fieldset>
<fieldset v-if="step == 2">
  <template v-if="category == 'real estate'">
   // form for this cateegory
  </template>
  <template v-else-if="category == 'IT'">
   // form for this category
  </template>
  // and so on
  . . .

</fieldset>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。