Vue.jsマウスイベントハンドラー改変体

Question

私はマウスイベントモディファイアを使用してVue.jsを学ぶので、小さなプログラムで作業しようとしています。

このアプリでは、子テンプレート内のカウンタを1ずつインクリメントするボタンをクリックしてから親に結果を送信し、親内の合計変数をインクリメントします。

この例は、Vuejs.orgのウェブサイトから直接取り上げられています。

この例では、左または右ボタンをクリックして値を増減することができます。だから私はマウスイベント修飾子を使ってこれを作り直そうとしていました。しかし、私のコードは動作しません。

私はちょうど変更があったかどうかを確認するために、右のボタン修飾子をテストしたいと思った。ここで

Vue.component('button-counter', { 
template: ` 
    <button v-on:click.right="increment">{{ counter }}</button> 
`, 
data: function() { 
    return { 
     counter: 0 
    } 
}, 
methods: { 
    increment: function() { 
     this.counter += 1; 
     this.$emit('increment'); 
    } 
} 
}) 

var root = new Vue({ 
el: '#app', 
data: { 
    total: 0 
}, 

methods: { 
    incrementTotal: function() { 
     this.total += 1; 
    } 
} 
}) 

は私のhtmlコードはもちろん

<div id="app"> 
    <p>Total {{ total }}</p> 
    <button-counter v-on:increment="incrementTotal"></button-counter> 
    <button-counter v-on:increment="incrementTotal"></button-counter> 
</div><!-- end #app --> 

で、私は、.RIGHT修飾子がクリックイベントでなければならないことと仮定しています：ここで

はというコード形式でありますVuejs.orgのウェブサイトでは、これらの修飾子がどのイベントに対応しているかを特定していないためです。キーの修飾子はもう少し簡単です。

私はこの例をmousedown.rightで試してみましたが、うまくいかなかったことにも注意してください。 mousedownイベントは機能しますが、.right修飾子を追加すると表示されません。

しかし、どんな助けも素晴らしいでしょう。ありがとう。

Answer 1

v-on:mousedown.rightが有効です。ここに例があります。また、ボタンが右クリックを使用するように設定されているときにコンテキストメニューが表示されないようにするコードを追加しました。

console.clear() 
 

 

 
Vue.component('button-counter', { 
 
    props: ["button"], 
 
    template: ` 
 
    <button v-if="button === 'right'" 
 
      v-on:mousedown.right="increment" 
 
      v-on:contextmenu.prevent=""> 
 
     {{ counter }} 
 
    </button> 
 
    <button v-else 
 
      v-on:click="increment"> 
 
     {{ counter }} 
 
    </button>`, 
 
    data: function() { 
 
    return { 
 
     counter: 0 
 
    } 
 
    }, 
 
    methods: { 
 
    increment: function() { 
 
     this.counter += 1; 
 
     this.$emit('increment'); 
 
    }, 
 
    } 
 
}) 
 

 
var root = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    total: 0 
 
    }, 
 
    methods: { 
 
    incrementTotal: function() { 
 
     this.total += 1; 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> 
 
<div id="app"> 
 
    <p>Total {{ total }}</p> 
 
    <button-counter v-on:increment="incrementTotal"></button-counter> 
 
    <button-counter v-on:increment="incrementTotal" button="right"></button-counter> 
 
</div> 
 
<!-- end #app -->