我试图在用户点击按钮时使用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添加更多项来创建更多字段。但出于某种原因,在调用更多关键词之后,页面会刷新,然后返回原始状态。
答案 0 :(得分:2)
来自Vue的文档
使用修饰符时顺序很重要,因为相关代码是 以相同的顺序生成。因此使用@ click.prevent.self会 防止所有点击,而@ click.self.prevent只会阻止点击 关于元素本身。
您需要将.prevent
添加到v-on:click
,以便它变为v-on:click.self.prevent