Vue.js：別のクリックイベント内でのクリックアクションの割り当て

Question

「編集」ボタンをクリックすると、編集モードを作成しようとしています。このモードでは、保存ボタン、削除ボタンなどが作成されます。

私はボタンを作成するためにjQueryを使用していますが、私はそれらにイベントを割り当てようとしていますが、割り当て時にイベントハンドラが起動します。 私はイベントの伝播について何かを読んだことがあるが、それを解決する方法を理解できないようだ。

トリガされるだけでなく、新しいボタンをクリックしようとすると、イベントは発生しません。 https://codepen.io/anon/pen/ooxQXR

私は伝播をinteruptingのいくつかの方法を試してみたが、何も動いていないようにみえ：

は、ここに私の問題の孤立例です。

e.stopImmediatePropagation(); 
e.stopPropagation(); 
e.preventDefault(); 

これを解決する方法はありますか。

Answer 1

この状況では、jQueryを忘れてしまいます。ほとんどの状況で、Vueを使用しています。 thisのように、テンプレート内の単純なif/elseブロックを使用しないでください。

<div id="app"> 
 
    <button v-if="!editMode" class="first" @click.stop="clickEvent">First</button> 
 
    <template v-else> 
 
     <button class="save">Save</button> 
 
     <button class="delete">Delete</button> 
 
    </template> 
 
</div>

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     editMode: false 
 
    } 
 
    }, 
 
    methods: { 
 
    clickEvent(e) { 
 
     this.editMode = true; 
 
    } 
 
    }, 
 
})

保存/削除ボタンに他のイベントハンドラを追加すると、次に問題になることはありません。