使用 VueJs 添加动态输入字段
Posted
技术标签:
【中文标题】使用 VueJs 添加动态输入字段【英文标题】：Adding Dynamic Input Fields With VueJs 【发布时间】：2019-03-24 07:56:19 【问题描述】：我正在使用Laravel 5.7 & VueJs 2.5.*...
我知道如何动态添加输入字段，但对于我的应用程序，我不明白该怎么做。我有“TicketInvoice.Vue”，在那个页面我有一个引导模式来创建和更新我的发票。我有 2 个单独的 DB 表，一个用于 TicketInvoice，另一个用于 TicketInvoiceItems....TicketInvoiceItems 是一个数组，因为 TicketInvoice 有很多 TicketInvoiceItems。
我的<script> 标签，这里是所有TicketInvoice 字段：
<script>
export default
data()
return
ticketInvoices: ,
form: new Form(
id: "",
vendor_id: "",
ticket_invoice_no: "",
ticket_invoice_date: "",
ticket_invoice_fares_total: "",
ticket_invoice_taxes_grand_total: "",
ticket_invoice_grand_total: "",
ticket_invoice_grand_total_words: "",
ticket_invoice_terms: "",
)
;
,
</script>
TicketInvoiceItems = Data 我希望动态添加他们的字段。
<script>
export default
data()
return
form: new Form(
ticketInvoiceItems: [
ticket_invoice_id: '',
passenger_name: '',
ticket_no: '',
flight_no: '',
departure_date: '',
sector: '',
fares: '',
tax_SB: '',
tax_SRP: '',
tax_YQ: '',
tax_RG: '',
tax_PK: '',
tax_YR: '',
tax_SF: '',
tax_PTT: '',
tax_OAS: '',
tax_PSF: '',
tax_PB: '',
tax_OAD: '',
total_tax_breakup: '',
sub_total: ''
]
;
,
</script>
这是我的html 代码：
<tbody>
<tr>
<!--Passenger Name-->
<td>
<input v-model="form.passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class=" 'is-invalid': form.errors.has('passenger_name') ">
<has-error :form="form" field="passenger_name"></has-error>
</td>
<!--Ticket No.-->
<td>
<input v-model="form.ticket_no" size="24" type="text" name="ticket_no" class="table- control form-control" :class=" 'is-invalid': form.errors.has('ticket_no') ">
<has-error :form="form" field="ticket_no"></has-error>
</td>
<!--Flight No.-->
<td>
<input v-model="form.flight_no" size="7" type="text" name="flight_no" class="table- control form-control" :class=" 'is-invalid': form.errors.has('flight_no') ">
<has-error :form="form" field="flight_no"></has-error>
</td>
<!--Departure Date-->
<td>
<input v-model="form.departure_date" type="date" name="departure_date" class="table- control form-control" :class=" 'is-invalid': form.errors.has('departure_date') ">
<has-error :form="form" field="departure_date"></has-error>
</td>
<!--Sector-->
<td>
<input v-model="form.sector" type="text" name="sector" class="table-control form- control" :class=" 'is-invalid': form.errors.has('sector') ">
<has-error :form="form" field="sector"></has-error>
</td>
<!--DROPDOWN MENU-->
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false">
</button>
<div class="dropdown-menu form-group" aria-labelledby="dropdownMenuButton">
<form class="px-1 py-1">
<!--Taxes BreakUp-->
<input v-model="form.tax_SB" type="number" name="tax_SB" placeholder="SB"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_SB') ">
<has-error :form="form" field="tax_SB"></has-error>
<input v-model="form.tax_SRP" type="number" name="tax_SRP" placeholder="SRP"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_SRP') ">
<has-error :form="form" field="tax_SRP"></has-error>
<input v-model="form.tax_YQ" type="number" name="tax_YQ" placeholder="YQ"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_YQ') ">
<has-error :form="form" field="tax_YQ"></has-error>
<input v-model="form.tax_RG" type="number" name="tax_RG" placeholder="RG"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_RG') ">
<has-error :form="form" field="tax_RG"></has-error>
<input v-model="form.tax_PK" type="number" name="tax_PK" placeholder="PK"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_PK') ">
<has-error :form="form" field="tax_PK"></has-error>
<input v-model="form.tax_YR" type="number" name="tax_YR" placeholder="YR"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_YR') ">
<has-error :form="form" field="tax_YR"></has-error>
<input v-model="form.tax_SF" type="number" name="tax_SF" placeholder="SF"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_SF') ">
<has-error :form="form" field="tax_SF"></has-error>
<input v-model="form.tax_PTT" type="number" name="tax_PTT" placeholder="PTT"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_PTT') ">
<has-error :form="form" field="tax_PTT"></has-error>
<input v-model="form.tax_OAS" type="number" name="tax_OAS" placeholder="OAS"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_OAS') ">
<has-error :form="form" field="tax_OAS"></has-error>
<input v-model="form.tax_PSF" type="number" name="tax_PSF" placeholder="PSF"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_PSF') ">
<has-error :form="form" field="tax_PSF"></has-error>
<input v-model="form.tax_PB" type="number" name="tax_PB" placeholder="PB"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_PB') ">
<has-error :form="form" field="tax_PB"></has-error>
<input v-model="form.tax_OAD" type="number" name="tax_OAD" placeholder="OAD"
class="table-control form-control" :class=" 'is-invalid': form.errors.has('tax_OAD') ">
<has-error :form="form" field="tax_OAD"></has-error>
</form>
</div>
</div>
</td>
<!--Total Taxes Break Up-->
<td>
<input v-model="form.total_tax_breakup" type="number" size="10" name="total_tax_breakup" class="table-control form-control" :class=" 'is-invalid': form.errors.has('total_tax_breakup') ">
<has-error :form="form" field="total_tax_breakup"></has-error>
</td>
<!--Fares-->
<td>
<input v-model="form.fares" type="number" size="10" name="fares" class="table-control form-control" :class=" 'is-invalid': form.errors.has('fares') ">
<has-error :form="form" field="fares"></has-error>
</td>
<!--Sub Total -->
<td>
<input v-model="form.sub_total" type="number" size="10" name="sub_total" class="table- control form-control" :class=" 'is-invalid': form.errors.has('sub_total') ">
<has-error :form="form" field="sub_total"></has-error>
</td>
<!--Remove Button-->
<td>
<button class="btn btn-default form-control" style="background-color: transparent;"><i class="fas fa-times-circle text-fade-red"></i></button>
</td>
</tr>
<!--Add Button-->
<button class="btn btn-default" style="background-color: transparent;"><i class="fas fa- check-circle text-green"></i></button>
</tbody>
enter image description here
【问题讨论】：
有一个 NPM-Package 可以让它更简单一点：npmjs.com/package/bootstrap-vue-editable-table 【参考方案1】：您需要添加一个包含您需要的所有字段的模板。假设它们都是文本字段
<script>
export default
data()
return
formFields: [
"passenger_name",
"ticket_no",
"flight_no",
"departure_date",
"sector",
]
...
然后您现在可以像这样动态地将字段添加到表单中：
<td v-for="(fieldName, pos) in formFields" :key="pos">
<input v-model="form[fieldName]" size="40" type="text" :name="fieldName" class="table-control form-control" :class=" 'is-invalid': form.errors.has(fieldName) ">
<has-error :form="form" :field="fieldName"></has-error>
</td>
【讨论】：
我没听懂，因为我有我的下拉菜单，在那个下拉菜单中我有更多输入字段，我只是使用该下拉菜单来节省一些空间而且我的表单看起来不错，我是如何使用 @ 987654323@ 在那个下拉列表中？我是否必须在该下拉列表内的输入字段中使用v-for？我如何调用添加或删除字段的方法？
@PartabSaifuddinZakir 你有解决方案吗？【参考方案2】：
这是向 vue 表单添加动态字段的简单方法。
表格：
<form>
....other fields.....
//dynamic fields section start
<div class="form-group row" v-for="(skill, k) in form.skills" :key="k">
<label for="skill" class="col-md-4 col-form-label text-md-right">Skills</label>
<div class="col-md-4">
<input id="skill" v-model="skill.skill" type="text" class="form-control"
name="skills[][skill]" value="" required
:class=" 'is-invalid': form.errors.has('skill') ">
<has-error :form="form" field="skill"></has-error>
</div>
<div class="col-md-2">
<span v-if="k > 0" @click.prevent="remove(k)"><i class="fa fa-trash"></i></span>
</div></div>
<div class="col-md-12 text-center"><button class="btn btn-success"
@click.prevent="addMore()">Add</button>
</div>
//Dynamic fields section end
</form>
然后在你的脚本部分简单地添加这些脚本代码：
<script>
data()
return
form: new Form(
name: '',
email: '',
user_skill:
skill: ''
,
skills: [],
),
,
methods:
addMore()
this.form.skills.push(Vue.util.extend(, this.form.skill));
,
remove(index)
this.form.skills.splice(index, 1);
,
使用这种方式我希望它能正常工作：
【讨论】：
以上是关于使用 VueJs 添加动态输入字段的主要内容，如果未能解决你的问题，请参考以下文章