我是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');
}
}
}
发布于 2019-06-27 07:34:25
这个属性是不同语法的奇怪组合:
:on-click="click(1)"
不清楚您是在尝试绑定元素的onclick
属性,还是(更有可能的是)向元素添加一个Vue click侦听器。
你真正想要的很可能是:
@click="click(1)"
@
是v-on:
的缩写,而原始代码中的:
是v-bind:
的缩写。尝试绑定一个名为on-click
的属性是完全有效的,但它将被视为自定义属性,因为on-click
实际上并不是一件事。绑定在呈现期间被评估以确定属性的值,这就是为什么您将在呈现期间看到日志记录。
发布于 2019-06-27 04:59:34
尝试将事件传递给单击处理程序方法click(number, event)
,并使用event.preventDefault()
停止传播。
https://stackoverflow.com/questions/56780435
复制相似问题