Vue.js鼠标事件处理程序修改器

在学习使用鼠标事件修改器的Vue.js时，我正在尝试编写一个小程序

该应用程序允许用户单击一个按钮，将子模板中的计数器增加一个，然后将结果发送给父模板，从而增加父模板中的总变量

从表面上看，此示例直接取自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;
    }
}
})

Vue.component（'button-counter'{
模板：`
{{counter}}
`,
数据：函数（）{
返回{
柜台:0
}
},
方法：{
增量：函数（）{
这个计数器+=1；
这是.$emit（'increment'）；
}
}
})
var root=新的Vue({
el:“#应用程序”，
数据：{
总数：0
},
方法：{
incrementTotal:函数（）{
这1.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 -->

总计{{Total}

当然，我假设.right修饰符必须在click事件上，因为Vuejs.org网站没有指定这些修饰符用于哪个事件。它们对关键点的修改更为直接

我还应该注意，我确实用mousedown.right尝试了这个例子，但它不起作用。mousedown事件可以工作，但当我添加.right修饰符时就不行了

---

但任何帮助都会很好。谢谢。

v-on:mousedown。对

应该可以。这里有一个例子。我还添加了一些代码，以防止在将按钮配置为使用右键单击时显示上下文菜单

console.clear（）
Vue.组件（“按钮计数器”{
道具：[“按钮”]，
模板：`
{{counter}}
{{counter}}
`,
数据：函数（）{
返回{
柜台:0
}
},
方法：{
增量：函数（）{
这个计数器+=1；
这是.$emit（'increment'）；
},
}
})
var root=新的Vue({
el:“#应用程序”，
数据：{
总数：0
},
方法：{
incrementTotal:函数（）{
这1.total+=1；
}
}
})

总计{{Total}

您正在使用哪个版本的Vue？我正在使用cdn to 2.4