I encapsulate the input into a component
now there is a problem
every time I click the add button t_expensedetail array length plus one, and then the input input will be delayed
I don"t know how to optimize the performance. Thank you
parent component
<dl class="form-card" v-for="(item,index) in t_expensedetail" :key="index" :class="{"form-card-top": index !== 0}">
<dt v-if="index === 0" class="step-content">:</dt>
<dd class="reduce-container" v-if="t_expensedetail.length > 1">
<div>{{index+1}}</div>
<div class="reduce" @click="reduceColumn(index)"></div>
</dd>
<dd class="form-list">
<first-input-box h-kind="1" :h-check="subCheck" v-model="t_expensedetail[index].EXPENSE_ITEM" h-placeholder=""></first-input-box>
</dd>
<dd v-if="t_expensedetail.length-1 <= index" class="add" @click="addColumn"><span class="financial-reimbursement-plus financial-reimbursement-iconfont"></span></dd>
</dl>where the method is added is the input box method
addColumn () {
this.t_expensedetail.push({
EXPENSE_ITEM: "" //
})
}subcomponents
<input ref="cInput" class="c-input" :type="hType" :placeholder="hPlaceholder" :value="value" @input="inputFunc($event, $event.currentTarget)">method of passing values for subcomponents
inputFunc (e, target) {
this.$emit("input", target.value)
}there is no problem on the pc, but there is a problem on the phone. When the keyboard pops up and the first paragraph can be typed back, it will not show. Sometimes it takes a long time and sometimes you have to keep typing to display the later. But I pop up the value value on the sub-component, which is a complete display, that is, whether there is a good solution
.