我正在尝试做一些基本的事情,但我无法弄明白。
我有一个下拉菜单:
<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但没有任何反应。
你不能在这里使用v-model
和div
。
相反,您应该使用v-click
调用方法以更新值selectedItem
并处理切换操作。
还有一件事,当你使用v-for
时,你应该拥有Vuejs推荐的key id
。
刚刚起草实施:
<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">
<a class="dropdown-item" v-for="item in items" :key="item.id" v-click="handleSelectItem(item)">
{{item.name}}
</a>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
selectedItem: null,
items: [
{
id: 1,
name: "Dropdown Item"
},
{
id: 2,
name: "Dropdown Item 2"
},
{
id: 3,
name: "Dropdown Item 3"
}
]
},
method: {
handleSelectItem(item){
this.selectedItem = item.name;
// you can also handle toggle action here manually to open and close dropdown
}
}
});
您可以将事件传递给处理函数并通过event.target访问它
<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" @click="HandlerFunction">
{{item.name}}
</a>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
selectedItem: null,
items: [
{
name: "Dropdown Item"
},
{
name: "Dropdown Item 2"
},
{
name: "Dropdown Item 3"
}
]
},
methods: {
HandlerFunction(event){
console.log(event.target)
}
}
});
谢谢你,我用你的方式做了一点点不同:
<a class="dropdown-item" v-model="selectedItem" v-for="item in items" @click="selected(item)">
{{item.name}}
</a>
var app = new Vue({
el: '#app',
data: {
selectedItem: null,
items: [
{
name: "Dropdown Item"
},
{
name: "Dropdown Item 2"
},
{
name: "Dropdown Item 3"
}
]
},
methods: {
selected(element) {
this.selectedItem = element.name
}
}
});