我正在尝试做一些基本的事情,但我想不通。
我有一个下拉菜单:
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{selectedItem}}</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content" v-model="selectedItem">
<a class="dropdown-item" v-for="item in items">
{{item.name}}
</a>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
selectedItem: null,
items: [
{
name: "Dropdown Item"
},
{
name: "Dropdown Item 2"
},
{
name: "Dropdown Item 3"
}
]
},
});
基本上我尝试在单击下拉项目时执行 {{selectedItem}} 因为我尝试在我的菜单包装器中使用 v-model 但没有任何反应。
最佳答案
根据 Kumar 的回答,您可以默认访问处理程序方法中的事件只要您不传递任何其他参数。
但是,如果您确实传递了一个参数,那么您似乎必须使用 $event
显式传递事件:
<button @click="doStuff('whatever', $event)">Do Stuff</button>
...
doStuff(whatever, event) {
console.log(event.target);
}
如果您要使用事件对象,最好显式传递它而不是依赖默认值。或不,取决于你的观点。这是让事情变得清晰或节省打字时间之间的折腾!
<!-- this works -->
<button @click="doStuff">Do Stuff</button>
<!-- this works too -->
<button @click="doStuff($event)">Do Stuff</button>
...
doStuff(event) {
console.log(event.target);
}
(我用 Vue 2.6 尝试了这些)
关于javascript - vue中如何获取被点击的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53737648/