python - vue js中如何提示分类指定表单
问题描述
在第一步表单中,我们有一个字段类别字段。
- 如果用户基于此输入“房地产”,我们需要在第二步中提示房地产表单,其中包含“总房间”、“平方英尺”等输入字段。
- 如果用户根据该类别输入“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>
推荐阅读
- sql - 结合使用 case 子句 SQL Server 2014 从别名列中删除 Char 10、Char 13 字符
- javascript - 缺少数字算法超时错误 (JavaScript)
- javascript - Bootstrap vue popover中带有v-show的动态内容
- angular - Angular 和 VS Code 禁用自动重新加载/刷新
- angular - ChartJs - 是否可以在一个数据集中仅显示工具提示?
- laravel - Laravel 获取属于列的数据
- python - Python:使用类似 zip 的函数同时迭代可迭代和 saclar
- java - 同步骆驼路线的等待时间
- javascript - 从对象集中获取三个值
- repository - Hippo CMS 在链接的 bean 中搜索