调用方法时页面刷新（不需要）

Question

我正在尝试在用户单击按钮时使用 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后，页面刷新，又回到原来的状态

Answer 1

来自 Vue 的文档

Order matters when using modifiers because the relevant code is generated in the same order. Therefore using @click.prevent.self will prevent all clicks while @click.self.prevent will only prevent clicks on the element itself.

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

调用方法时页面刷新（不需要）

Page refreshes (unwanted) when method is called

html

javascript

vue.js

v-for