Vuejs2-无法将数据对象中的属性值应用于动态添加的表行

我想将动态行附加到表中。我可以添加动态行，但数据对象中定义的属性值和css样式不适用于那些新添加的行。表的第一行（已定义的一行）显示属性值及其css也正常工作

billing.vue

<template>
<b-card  id="showBill"> 
<div class="table-responsive col-md-6">
<table class="table table-striped table-bordered table-sm" id="tbl">
    <thead>
        <tr>
            <th>Charges</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><select class="form-control input-sm form-control3"> <option v-for="option in chargesOpt" v-bind:value="option.value" :key="option.value"> {{ option.text }} </option></select></td>
            <td><input type="text" class=" form-control input-sm  form-control3"></td>
        </tr>
    </tbody>
    <tfoot>
         <tr class="table-secondary">
        <th>Total Amount</th>
        <th style="text-align:right;">0.00</th>
         </tr>
    </tfoot>
</table>
</div>

<div class="col-md-6">
<button type="button" class="btn btn-success" @click="addRow">Add</button>
</div>
 </b-card>
</template>

<script>

export default {
   data () {
    return {
     chargesOpt:[
        { value: '', text: 'Select'},
        { value: '1', text: 'Maintanence'},
        { value: '2', text: 'Extra'}
    ]   
   }
  },
  methods:{
     addRow()
      {
        var table = document.getElementById("tbl");
        var rowCount = table.rows.length-1;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = cell1.innerHTML +'<select class="form-control input-sm form-control3"> <option v-for="option in chargesOpt" v-bind:value="option.value" :key="option.value"> {{ option.text }} </option></select>';
        cell2.innerHTML = cell2.innerHTML +'<input type="text" class=" form-control input-sm form-control3"/>';
      }
  }
}
</script>
<style lang="scss" scoped>

@import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
.is-danger{
  color:  RED;
}
.form-control{display:block;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.input-sm{
  border: 1px solid #ccc;
  padding: 5px 8px;
  color: #616161;
  background: #fff;
  box-shadow: none !important;
  width: 100%;
  font-size: 0.85em;
  font-weight: 300;
  height: 40px;
  border-radius: 0;
  -webkit-appearance: none;
  resize: none;
}
.input-sm {
    font-size: 14px;
    height: 35px;
}
.form-control3 {   /* For Vacancy List Table Input Fields */
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: transparent!important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px; 
    box-shadow: none !important;
 }       
.form-control3:focus {
    border: 1px solid #03a9f4 !important;
    background: #fff !important;
    box-shadow: none !important;
}
.form-control3{
    height: 30px;
}
 .form-control3,{
    padding-bottom: 0px;
    padding-top: 0px;
}       
</style>

收费
数量
{{option.text}
总金额
0
添加
导出默认值{
数据（）{
返回{
收费标准：[
{值：''，文本：'选择'}，
{value:'1'，text:'maintance'}，
{值：'2'，文本：'Extra'}
]   
}
},
方法：{
addRow（）
{
var table=document.getElementById（“tbl”）；
var rowCount=table.rows.length-1；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
cell1.innerHTML=cell1.innerHTML+“{{option.text}}”；
cell2.innerHTML=cell2.innerHTML+“”；
}
}
}
@导入“../../../node_modules/bootstrap/dist/css/bootstrap.min.css”；
.有危险吗{
颜色：红色；
}
.form控件{显示：块；填充：6px 12px；字体大小：14px；行高：1.42857143；颜色：#555；背景颜色：#fff；背景图像：无；边框：1px实心#ccc；边框半径：4px；方框阴影：插入0 1px 1px rgba（0,0,075）；过渡：边框颜色。15s缓进缓出，方框阴影。15s缓进缓出
}
.输入sm{
边框：1px实心#ccc；
填充：5px 8px；
颜色：#6161；
背景：#fff；
盒影：无！重要；
宽度：100%；
字号：0.85em；
字体大小：300；
高度：40px；
边界半径：0；
-webkit外观：无；
调整大小：无；
}
.输入sm{
字体大小：14px；
高度：35px；
}
.form-control3{/*用于空缺列表表输入字段*/
垫底：0px；
填充顶部：0px；
背景色：透明！重要；
背景：透明！重要；
边框：1px实心透明！重要信息；
边界半径：5px；
盒影：无！重要；
}       
.form-control3：焦点{
边框：1px实心#03a9f4！重要；
背景：#fff！重要；
盒影：无！重要；
}
.form-control3{
高度：30px；
}
.表格控制3{
垫底：0px；
填充顶部：0px；
}       

您可以执行以下操作：

<tr v-for="charge in charges">
    <td>
        <select class="form-control input-sm form-control3" v-model="charge.opt">
            <option v-for="option in chargesOpt" v-bind:value="option.value" :key="option.value">{{ option.text }}</option>
        </select>
    </td>
    <td>
        <input type="text" class=" form-control input-sm  form-control3" v-model="charge.value">
    </td>
</tr>

---

通过在表行上使用

v-for

，并将新对象推送到

charges

数组中，vue将负责为您创建新行。

它正在工作。但在金额字段中，我一次只能输入一个字符。如果我输入一个数字，它将失去焦点，然后我再次添加下一个字符，它将失去焦点focusThnanks@Ross威尔逊。我找到了cause@Ashwini原因是什么。我又添加了一个名为“Amt”的键，并将其用作“charge.Amt”而不是“charge.value”。我认为它将“value”视为数组的键

export default {
    data() {
        return {
            chargesOpt: [
                {value: '', text: 'Select'},
                {value: '1', text: 'Maintanence'},
                {value: '2', text: 'Extra'}
            ],
            charges: []
        }
    },

    mounted() {
        this.addRow();
    },

    methods: {
        addRow() {
            this.charges.push({
                value: '',
                opt: ''
            });
        }
    }
}