Javascript 如何在vue中单击项目

我正试着做一些基本的事情，但我搞不懂

我有一个下拉列表：

<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}}
{{item.name}
var app=新的Vue({
el:“#应用程序”，
数据：{
selectedItem:null，
项目：[
{
名称：“下拉项”
},
{
名称：“下拉项2”
},
{
名称：“下拉项3”
}
]
},
});

---

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

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

{{item.name}
var app=新的Vue({
el:“#应用程序”，
数据：{
selectedItem:null，
项目：[
{
名称：“下拉项”
},
{
名称：“下拉项2”
},
{
名称：“下拉项3”
}
]
},
方法：{
HandlerFunction（事件）{
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
      }
    }
  });

{{item.name}
var app=新的Vue({
el:“#应用程序”，
数据：{
selectedItem:null，
项目：[
{
名称：“下拉项”
},
{
名称：“下拉项2”
},
{
名称：“下拉项3”
}
]
},
方法：{
选定（元素）{
this.selectedItem=element.name
}
}
});

您不能在此处将

v-model

与

div

一起使用

相反，您应该使用

v-click

调用一个方法来更新值

selectedItem

并处理切换操作

还有一件事，当您使用

v-for

时，您应该拥有Vuejs推荐的

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

{{selectedItem}}
{{item.name}
var app=新的Vue({
el:“#应用程序”，
数据：{
selectedItem:null，
项目：[
{
id:1，
名称：“下拉项”
},
{
id:2，
名称：“下拉项2”
},
{
id:3，
名称：“下拉项3”
}
]
},
方法：{
handleSelectItem（项目）{
this.selectedItem=item.name；
//您还可以在此处手动处理切换操作以打开和关闭下拉列表
}
}
});

我们还可以通过以下方法使用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

。。。模板
{{menuItem.title}
... 更多模板
... 脚本部分
方法：{
展开（{target}）{
log（'这是我单击的元素：'，目标）；
}
}
... 更多脚本代码

基于Kumar的答案，默认情况下，只要不传递任何其他参数，就可以在处理程序方法中访问事件

但是，如果确实传递了参数，则似乎必须使用

$event

显式传递事件：

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

...

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

做事
...
doStuff（无论什么，事件）{
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);
}

做事
做事
...
多斯塔夫（事件）{
console.log（event.target）；
}

（我用Vue 2.6试用了这些）