Javascript 始终调用Vue方法（不仅仅是单击）

我是vue的新手，仍然试图理解代码背后的基础知识。 现在我有一个方法的问题。仅当用户单击按钮时才应调用它。但它总是被称为。我添加了一个alert（）/console.log（），然后多次显示

下面是一些代码：

<template>
    <div>
        <center>
            <table>
                <tr>
                    <th><button  :on-click="click(1)" class="white1"><li v-bind:class="{'icon': containertyp[1] == 'l', 'iconLH': containertyp[1] == 'lh', 'iconBH': containertyp[1] == 'bh'}"></li></button></th>
                    <th><button  :on-click="click(2)" class="white1"><li v-bind:class="{'icon': containertyp[2] == 'l', 'iconLH': containertyp[2] == 'lh', 'iconBS': containertyp[2] == 'bs'}"></li></button></th>
                    <th><button  :on-click="click(3)" class="white1"><li v-bind:class="{'icon': containertyp[3] == 'l', 'iconLH': containertyp[3] == 'lh', 'iconBS': containertyp[3] == 'bs'}"></li></button></th> 
                <tr>    
            </table>
        </center>
    </div>
</template>

export default {
    data: function () {
        return {
            nr: [],
            containertyp: [],
        }
    },
    methods: {
        click(number) {

            for (var i = 0; i < 27; i++) {
                this.nr[i] = false;
                if (number == i) {
                    this.nr[i] = true;
                }
            };
            console.log(this.nr);
            EventBus.$emit('containerclicked');

        }
    }
}

导出默认值{
数据：函数（）{
返回{
编号：[]，
容器类型：[]，
}
},
方法：{
点击（数字）{
对于（变量i=0；i<27；i++）{
this.nr[i]=假；
如果（数字==i）{
this.nr[i]=真；
}
};
console.log（this.nr）；
EventBus.$emit（'containerclicked'）；
}
}
}

尝试将事件传递给单击处理程序方法

单击（数字，事件）

并使用

event.preventDefault（）停止传播
尝试将事件传递给单击处理程序方法
单击（数字，事件）
并使用
event.preventDefault（）停止传播
此属性是不同语法的奇怪混合体：

:on-click="click(1)"

不清楚您是在尝试绑定元素的
onclick
属性，还是（更有可能）向元素添加Vue click侦听器

最有可能的是，您真正想要的是：

@click="click(1)"

@
是
v-on:
的缩写，而原始代码中的
：
是
v-bind:
的缩写。尝试在单击时绑定名为
的属性
是完全有效的，但它将被视为自定义属性，因为单击时
实际上不是一件事。在呈现期间对绑定进行评估以确定属性的值，这就是为什么在呈现期间会看到日志记录。
此属性是不同语法的奇怪混合体：

:on-click="click(1)"

不清楚您是在尝试绑定元素的
onclick
属性，还是（更有可能）向元素添加Vue click侦听器

最有可能的是，您真正想要的是：

@click="click(1)"

@
是
v-on:
的缩写，而原始代码中的
：
是
v-bind:
的缩写。尝试在单击时绑定名为
的属性
是完全有效的，但它将被视为自定义属性，因为单击时
实际上不是一件事。在渲染期间对绑定进行评估，以确定属性的值，这就是为什么您将在渲染期间看到日志记录