vueJsディレクティブv-onを拡張：

Question

私はvuejsに新規です。私は最初のアプリを作成しようとしています。ボタンをクリックするたびに確認メッセージを表示したいと思います。

例：

<button class="btn btn-danger" v-on:click="reject(proposal)">reject</button> 

私の質問です：私はどこでも確認を表示するv-on:clickイベントを拡張することはできますか？ v-confirm-clickというカスタムディレクティブを最初に実行し、「ok」をクリックするとclickイベントが実行されます。出来ますか？

Answer 1

代わりにコンポーネントをお勧めします。 Vueのディレクティブは、通常、直接的なDOM操作に使用されます。ほとんどの場合、ディレクティブが必要と思われる場所では、コンポーネントが優れています。

ここに確認ボタンコンポーネントの例を示します。あなたはこのように使用することができ

Vue.component("confirm-button",{ 
    props:["onConfirm", "confirmText"], 
    template:`<button @click="onClick"><slot></slot></button>`, 
    methods:{ 
    onClick(){ 
     if (confirm(this.confirmText)) 
     this.onConfirm() 
    } 
    } 

}) 

：ここ

<confirm-button :on-confirm="confirm" confirm-text="Are you sure?"> 
    Confirm 
</confirm-button> 

は一例です。

console.clear() 
 

 
Vue.component("confirm-button", { 
 
    props: ["onConfirm", "confirmText"], 
 
    template: `<button @click="onClick"><slot></slot></button>`, 
 
    methods: { 
 
    onClick() { 
 
     if (confirm(this.confirmText)) 
 
     this.onConfirm() 
 
    } 
 
    } 
 

 
}) 
 

 
new Vue({ 
 
    el: "#app", 
 
    methods: { 
 
    confirm() { 
 
     alert("Confirmed!") 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <confirm-button :on-confirm="confirm" confirm-text="Are you sure?"> 
 
    Confirm 
 
    </confirm-button> 
 
</div>

Answer 2

私はディレクティブを拡張する方法を知りません。クリックハンドラにconfirm呼び出しを含めることは簡単です。すべてのクリックを確認済みのクリックに変換することはありませんが、どちらも新しい指令を作成することはありません。どちらの場合でも、新しいフォームを使用するためにすべてのコードを更新する必要があります。

new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    reject(p) { 
 
     alert("Rejected " + p); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <button class="btn btn-danger" @click="confirm('some message') && reject('some arg')">reject</button> 
 
</div>