当用户单击按钮时,我正在尝试使用 vuejs 动态生成更多输入字段。我的代码工作非常短暂(生成更多字段),但出于某种原因,页面会自动刷新,将用户设置回他们开始的位置。这是我的代码
<div class='wordsdiv'>
<div id='onedictspec' v-for='arrayspot in wordupload.wordinput.length'>
<input type='text' class='inputwordtext' v-model='wordupload.wordinput[arrayspot - 1][0]'>
<input type='text' class='inputwordtext' v-model='wordupload.wordinput[arrayspot - 1][1]'>
</div>
</div>
<div id='morewords'>
<button class='morewordsbtn active hover' v-on:click='morewords'>More words</button>
</div>
这是我在 Vue 中的 javascript,数据
wordupload: {
wordinput: [['','']]
}
以及方法
morewords: function () {
oldcount = this.wordupload.wordinput.length
newcount = oldcount + 10
while (oldcount < newcount){
this.wordupload.wordinput.push(["", ""])
oldcount += 1
}
}
基本上,wordupload.wordinput 列表中的每个项目都会生成两个输入字段,因此我尝试通过向 wordinput 添加更多项目来创建更多字段。但不知为何,调用morewords后,页面刷新,又回到了原来的状态。