Javascript 如何在 vue 中获得点击的项目

How get clicked item in vue

提问by user3348410

I'm trying to do basic something but i can't figure out.

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

i have a dropdown:

我有一个下拉列表：

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

Basically i'm trying to do when clicked to dropdown item it will be {{selectedItem}} for that i have tried to use v-model in my menu wrapper but nothing happened.

基本上，当单击下拉项目时，我试图做的是 {{selectedItem}} 因为我试图在我的菜单包装器中使用 v-model 但什么也没发生。

回答by Hoang Tran Son

You cannot use v-modelwith divhere.

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

Instead, You should use v-clickto call a method in order to update value selectedItemand handle toggle action.

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

One more thing, When you use v-foryou should have key idwhich is recommended by Vuejs.

还有一件事，当你使用时v-for你应该有key idVuejs 推荐的。

Just draft implementation:

只是草案实施：

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

回答by Kumar Adarsh

you can pass the event to the handler function and access it by event.target

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

回答by mEnE

We can also use ES6 syntax abbreviation via the methods:

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

... template
<a @click="expand" data-toggle="collapse" aria-expanded="false">{{ menuItem.title }}</a>
... more template


... script section
methods: {
    expand({ target }) {
      console.log('this is the element i clicked: ', target);
    }
  }
... more script code

回答by mrrrk

Building on Kumar's answer, you can access the event in the handler method by default as long you do not pass any other parameters.

以 Kumar 的回答为基础，您可以默认访问处理程序方法中的事件，只要您不传递任何其他参数。

However, if you do pass a parameter then it seems you have to pass the event explicitly using $event:

但是，如果您确实传递了一个参数，那么您似乎必须使用$event以下方法显式传递事件：

<button @click="doStuff('whatever', $event)">Do Stuff</button>

...

doStuff(whatever, event) {
    console.log(event.target);
}

If you're going to use the event object, it's probably better to pass it explicitly rather than rely on the default. Or not, depending on your point of view. It's a toss-up between making things clear or saving on typing!

如果要使用事件对象，最好显式传递它而不是依赖默认值。或者不，取决于你的观点。在使事情清楚或节省打字时间之间，这是一个折腾！

<!-- this works -->
<button @click="doStuff">Do Stuff</button>

<!-- this works too -->    
<button @click="doStuff($event)">Do Stuff</button>

...

doStuff(event) {
    console.log(event.target);
}

(I tried these out with Vue 2.6)

（我在 Vue 2.6 中尝试了这些）

回答by user3348410

thank you i make it with your way just a little different :

谢谢你，我用你的方式让它有点不同：

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