总是调用Vue方法

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (6)

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

        }
    }
}
提问于
用户回答回答于

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

用户回答回答于

此属性是不同语法的奇怪混合:

:on-click="click(1)"

目前还不清楚你是在尝试绑定onclick元素的属性还是(更有可能)为元素添加一个Vue点击监听器。

你最想要的是这个:

@click="click(1)"

@是简写v-on:,而:原始代码中的缩写v-bind:。尝试绑定一个被调用的属性on-click是完全有效的,但它将被视为一个自定义属性,因为on-click它实际上并不是一个东西。在渲染期间评估绑定以确定属性的值,这就是您在渲染期间将看到日志记录的原因。

扫码关注云+社区

领取腾讯云代金券