javascript - 调用方法时页面刷新(不需要)

当用户单击按钮时，我尝试使用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中添加更多项目来创建更多字段。但是由于某种原因，在调用更多单词后，页面会刷新，返回到原始状态。

最佳答案

从Vue的文档中


  使用修饰符时顺序很重要，因为相关代码是
  以相同的顺序生成。因此，使用@ click.prevent.self将
  阻止所有点击，而@ click.self.prevent仅阻止点击
  在元素本身上。


您需要将.prevent添加到您的v-on:click中，使其变为v-on:click.self.prevent