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

如果要使用事件对象，则最好显式传递它，而不要依赖默认值。是否可以，取决于您的观点。在弄清楚事情或节省键入之间是一种折衷！

 <button @click="doStuff">Do Stuff</button>  <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时，您应该拥有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
     }
  }
});

Answer 4

谢谢，我用自己的方式做到了：

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

Answer 5

我们还可以通过以下方法使用ES6语法缩写：

while running:
    process_events() # Events like input, e.g
    update() # Update frame
    draw() # Render things onto screen

如何在Vue中获得点击的项目

5 个答案: