vue動態產生div及v-model數據綁定

html模板

遍歷會涉及到v-model對值的綁定，這里的思路是根據數組中的下標尋找對應行數據

<div class="row" v-for="item,index in items">
   <div class="col-3">
        <div class="right">*{{ $t("品名") }}:</div>
   </div>
   <div class="col-5">
        <el-input v-model="spare_data[index].spare_name"></el-input>
   </div>
   <div class="col-3">
        <div class="right">*{{ $t("數量") }}:</div>
   </div>
   <div class="col-5">
        <el-input v-model="spare_data[index].spare_qty" ></el-input>
   </div>
</div>

 

data的return中加入數組

items可以根據自己的邏輯去賦值，數組長度與自己的想要多少行數據一致即可

data() {
    return {
        items:[],
        spare_data:[],
    }
},