如何解决我如何从同一表单中动态添加/更改多个选择选项
<template>
<div class="productUnitPrice">
<div class="row">
<h4>Product Bundle</h4>
<div v-for="(unitPackage,index) in this.UnitPackages" class="col-lg-12" style="margin-bottom: 5px; background: #ddd">
<div class="pull-right text-right">
<!--increase and decrease row quantity -->
<button type="button" v-on:click="AddUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">+</button>
<span v-if="index > 0">
<button type="button" v-on:click="removeUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">-</button>
</span>
</div>
<div style="padding:10px 0px">
<h6 class="heading"><strong>Select Product Unit </strong></h6>
<select :key="index" name="unit_type_id[]" v-model="unitPackage.unit_type_id" @change="getUnitQuantity(unitPackage.unit_type_id,index)">
<option class="text-danger" :value="null">Select Product Unit</option>
<option v-for="unitType in unitTypes" :value="unitType.id" class="text-danger">
{{unitType.unit_type}}
</option>
</select>
</div>
<div v-if="unitPackage.unit_type_id">
<h6 class="heading"><strong>Select Quantity</strong></h6>
<select :key="index" name="unit_quantity_id[]" v-if="unitPackage.unit_type_id !== null" v-model="unitPackage.unit_quantity_id">
<option class="text-danger" :value="null">Select Product Quantity</option>
<option v-for="unitQuantity in unitQuantities" :value="unitQuantity.id" class="text-danger">
{{unitQuantity.quantity}}
</option>
</select>
</div>
<div v-if="unitPackage.unit_type_id">
<h6 class="heading">
<strong>Select Unit Price</strong></h6>
<input type="text" class="form-control" v-model="unitPackage.price" name="price[]" placeholder="price">
</div>
<div v-if="unitPackage.price">
<h6 class="heading">
<strong>PrevIoUs Price</strong></h6>
<input type="text" class="form-control" v-model="unitPackage.prevIoUs_price" name="prevIoUs_price[]" placeholder="PrevIoUs Price">
</div>
<div v-if="unitPackage.prevIoUs_price">
<h6 class="heading">
<strong>Unit Stock</strong>
<p>put blank if unit_stock is unlimited </p></h6>
<input type="text" class="form-control" v-model="unitPackage.unit_stock" name="unit_stock[]" placeholder="Unit Stock">
</div>
</div>
</div>
</div>
</template>
<script>
import Api from "../../../api/api";
export default {
components: {
},data(){
return{
UnitPackages: [
{ index:0,unit_type_id:null,unit_quantity_id:null,price:null,unit_stock:null,prevIoUs_price:null
}
],unitTypes:[],unitQuantities:[],}
},methods:{
getUnitQuantity(unit_type_id,index){
// this.UnitPackages.unit_type_id = unit_type_id;
Api().get('product_unit_types',{
params:{
unit_type_id:unit_type_id
}
})
.then(response =>{
this.unitQuantities = response.data;
})
.then(json => console.log(json))
},AddUnitPackage(index){
this.UnitPackages.push({
index: index+1,prevIoUs_price:null
});
},removeUnitPackage(index){
this.UnitPackages.splice(index,1);
},},mounted() {
Api().get('/product_unit_types')
.then(response =>{
this.unitTypes = response.data.data;
console.log(response)
})
.then()
}
}
</script>
我想动态添加多个选择数据。当我单击“+”号时,它将克隆相同的表单,但如果我更改第一项,它也会更改其他部分。我如何调用和更改特定的选择项。
我想动态添加多个选择数据。当我单击“+”号时,它将克隆相同的表单,但如果我更改第一项,它也会更改其他部分。我如何调用和更改特定的选择项。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。