我在下面分享了我的代码。
<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,
unit_type_id:null,
unit_quantity_id:null,
price:null,
unit_stock:null,
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>
我想动态添加多个选择数据。当我单击“+”号时，它将克隆相同的表单，但如果我更改第一项，它也会更改其他部分。我如何调用和更改特定的选择项。
我想动态添加多个选择数据。当我单击“+”号时，它将克隆相同的表单，但如果我更改第一项，它也会更改其他部分。我如何调用和更改特定的选择项。
