Vue 方法总是被调用（不仅仅是点击）

Question

我是 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');

        }
    }
}

Answer 1

尝试将事件传递给点击处理程序方法 click(number, event) 并使用 event.preventDefault() 停止传播。

Answer 2

这个属性是不同语法的奇怪组合：

:on-click="click(1)"

不清楚您是想绑定元素的 onclick 属性还是（更有可能）向元素添加 Vue 点击监听器。

很可能您真正想要的是：

@click="click(1)"

对于v-on:，@ 是shorthand，而原始代码中的: 是v-bind: 的缩写。尝试绑定一个名为 on-click 的属性是完全有效的，但它将被视为自定义属性，因为 on-click 实际上不是一个东西。绑定在呈现期间进行评估以确定属性的值，这就是您将在呈现期间看到日志记录的原因。

Vue 方法总是被调用（不仅仅是点击）

Vue Method alway called (not only on-click)

javascript

methods

vue.js