メソッドが呼び出されたときにページがリフレッシュされる（不要になる）

Question

ユーザーがボタンをクリックしたときにvuejsを使用して入力フィールドを動的にジェネレートしようとしています。私のコードは非常に簡単に動作し（より多くのフィールドを生成します）、その後何らかの理由でページが自動的にリフレッシュされ、ユーザーはどこから始めたのかを再設定します。 データ

wordupload: { 
     wordinput: [['','']] 
} 

そして方法

morewords: function() { 
    oldcount = this.wordupload.wordinput.length 
    newcount = oldcount + 10 
    while (oldcount < newcount){ 
    this.wordupload.wordinput.push(["", ""]) 
    oldcount += 1 
    } 
} 

は基本的に2つの入力フィールドがwordupload内のすべての項目のために生成され、これが私のコード

<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のです.wordinput list。だから、私はwordinputに多くの項目を追加して、より多くのフィールドを作ろうとします。しかし、何らかの理由でmorewordsを呼び出した後、ページがリフレッシュされ元の状態に戻ります。

Answer 1

修飾子を使用した場合、関連するコードが同じ順序で生成 あるのでヴューのドキュメントから

順序が重要。したがって、@ click.prevent.selfを使用すると はすべてのクリックを防ぎますが、@ click.self.preventはその要素自体のクリック数が になることを防ぎます。あなたのv-on:clickに.preventを追加する必要が

ので、v-on:click.self.prevent