如何在vue中获得点击项目

Question

我正在尝试做一些基本的事情，但我无法弄清楚。

我有一个下拉列表：

 <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"
     }
    ]
  },
});

基本上，当单击下拉项时，我正在尝试这样做，因为我尝试在菜单包装器中使用 v-model ，但没有发生任何事情。

原文由 user3348410 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在此处使用 v-model 和 div 。

相反，您应该使用 v-click 调用方法以更新值 selectedItem 并处理切换操作。

还有一件事，当你使用 v-for 你应该有 key id 这是 Vuejs 推荐的。

只是草拟实施：

 <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
     }
  }
});

原文由 Tran Son Hoang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

基于 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 试过这些）

原文由 mrrrk 发布，翻译遵循 CC BY-SA 4.0 许可协议