如何根据html vue js中的select选项添加行?

Posted

技术标签:

【中文标题】如何根据html vue js中的select选项添加行?【英文标题】:How to add rows based on the select option in html vue js? 【发布时间】:2018-09-07 09:35:30 【问题描述】:

这是我的第一行。根据此处的选择选项,我需要选择不同的行

 <div class="row">
    <div class="col-md-4">
    <div class="form-group label-floating">
    <label class="control-label">Case Type</label>
    <select class="form-control" v-model="Type" id="type">
    <option value="1">One</option>
    <option value="2">Two</option>  
    <option value="3">Three</option>     
    </select>
    </div>
    </div>
    </div>

如果我选择选项 1,我需要显示以下行

 <div class="row">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Date Released</label>
 <input type="date" class="form-control" v-model="released" required="">
 </div>
 </div>
 </div>

如果我选择选项 2,我需要显示以下行

 <div class="row">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Full Name</label>
 <input type="date" class="form-control" v-model="fullname" required="">
 </div>
 </div>
 </div>

如果我选择选项 3,我需要显示以下行

 <div class="row">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Address</label>
 <input type="date" class="form-control" v-model="address" required="">
 </div>
 </div>
 </div>

如何在 html vue js 中实现以下案例?根据选项选择,我需要显示如上的行。

我的vue js代码是

addForm = new Vue(
    el: "#addForm",
    data: 
        Type: '',
        released: '',
        fullname:'',
        address: '',
    ,
    methods: 
        handleSubmit: function(e) 
            var vm = this;
            data['Type'] = this.Type;
            data['address'] = this.address;
            data['fullname'] = this.fullname;
            data['released'] = this.released;
            $.ajax(
                url: 'http://localhost:3000/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) 
                    if (e.status) 
                        vm.response = e;
                        alert("success")
                     else 
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    
                
            );
            return false;
        , 
    ,
);

【问题讨论】:

【参考方案1】:

使用Conditional Rendering

如下:

第 1 步:将 &lt;select&gt; 与 *selectedType' 绑定

第 2 步:使用v-if 确定应该显示哪一个。

new Vue(
    el: "#addForm",
    data: 
        selectedType: '',
        address:'',
        fullname:'',
        released:''
    ,
    methods: 
    
);
<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<div id="addForm">
 <div class="row">
    <div class="col-md-4">
    <div class="form-group label-floating">
    <label class="control-label">Case Type</label>
    <select class="form-control" v-model="selectedType">
    <option value="1">One</option>
    <option value="2">Two</option>  
    <option value="3">Three</option>     
    </select>
    </div>
    </div>
  <div>

 <div class="row" v-if="selectedType==='1'">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Date Released</label>
 <input type="date" class="form-control" v-model="released" required="">
 </div>
 </div>
 </div>



 <div class="row" v-if="selectedType==='2'">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Full Name</label>
 <input type="date" class="form-control" v-model="fullname" required="">
 </div>
 </div>
 </div>



 <div class="row" v-if="selectedType==='3'">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Address</label>
 <input type="date" class="form-control" v-model="address" required="">
 </div>
 </div>
 </div>
</div>

【讨论】:

以上是关于如何根据html vue js中的select选项添加行?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue.js 2 中设置 v-select 中选择的选项值?

Vue:如何根据选择的选项更改路线,并在 <select> 元素中显示默认选择的选项?

两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值

根据vue js中的选项选择在不同的div中显示数据

在 Vue 3 中加载异步选项时自动选择第一个 <select> 选项

Vue.js 中的 Select2 未定义