I have created a sample that mirrors the work I am currently doing.
var App = new Vue({
el:'#app',
data:{
demoText:'text',
sections:2,
sectionData:[0,0]
},
methods:{
changeData:function(){
for(var i=0;i<this.sections;i++){
if(isNaN(this.sectionData[i]))
this.sectionData[i]=0;
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id='app'>
<div v-for="n in sections">
<input type="text" v-model=sectionData[n-1]>
</div>
<input type="button" @click="changeData" value="click">
</div>When clicking on the button in this example, I check if the data is isNaN and set it to zero if it is. However, the updated data is not immediately reflected in the DOM or textbox. Subsequently, if I update another textbox, the pending update action occurs.
How can I address this problem?