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

基本上，我正在尝试单击下拉菜单项，原因是{{selectedItem}}，因为我尝试在菜单包装器中使用v-model，但没有任何反应。

Answer 1

以 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 中尝试了这些）

Answer 2

您可以将事件传递给处理函数并通过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)
  }
 }
});

Answer 3

您不能v-model在div这里使用。

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

还有一件事，当您使用时，v-for您应该拥有key idVuejs建议的功能。

只是实施草案：

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