关于在VUE中下拉列表的option无法添加事件传值的问题

      在vue项目中，当我们用v-for遍历select下的option时，我们想通过给option添加点击事件来获取我们所遍历的对象，却发现我们的点击事件根本不触发

      那么我们怎样才能把我们想要的值传递过去呢？我们需要在select上绑定一个v-model，在data里定义一个v-model所绑定的空值，然后通过change事件将这个空值传递过去，然后我们在option上绑定value属性，在value上绑定你要传递的值（也可以是当前对象的下标或者id），然后在change事件中接收你传过来的值，就可以了

vue官网也对这部分进行了介绍： 详见官网

你好。 首先，你可以为要添加动作的这个元素添加一个id属性，以便脚本引用。如： 手动输入 然后，为这个元素添加鼠标点击事件，代码我已经为你写好，请参考： 1、如果你是用原生的Javascript实现，代码如下： document.getElementById('myoption

ng-option指令使用很简单，只需要绑定两个属性：

一个是ng-model用于获取选定的值；

另一个是ng-options用于确定下拉列表的元素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。数据如下：

$scope.engineer = {

name: "Dani",

currentActivity: "Fixing bugs"

}

$scope.activities =

[

"Writing code",

"Testing code",

"Fixing bugs",

"Dancing"

]

运行结果如：

为了美观一点，这里引用了bootstrap。

View Code

复杂对象，自定义列表名称

有的时候下拉列表并不是单纯的字符串数组，可能是json对象，例如：

$scope.activities =

[

{ id: 1, type: "Work" , name: "Writing code" },

{ id: 2, type: "Work" , name: "Testing code" },

{ id: 3, type: "Work" , name: "Fixing bugs" },

{ id: 4, type: "Play" , name: "Dancing" }

]

这个时候，绑定的数据就必须是与这里面的格式相同的数据，比如直接复制其中一条：

$scope.engineer = {

name: "Dani" ,

currentActivity: {

id: 3,

type: "Work" ,

name: "Fixing bugs"

}

}

当然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然后在指令中可以循环列表拼接处下拉框的名称

<select

ng-model = "engineer.currentActivity"

class="form-control"

ng-options = "a.name +' (' + a.type + ')' for a in activities" >

</select >

运行效果如：

全部的代码如下：

View Code

实现下拉列表的分组

其实分组与前面的例子很像，只要把空间中的ng-options的值换成下面：

<select ng-model = "engineer.currentActivity"

class="form-control"

ng-options = "a.name group by a.type for a in activities" >

</select >

添加 group by 就会按照后面的值进行分组

全部代码：

View Code

按照id进行标识

由于之前的ng-model相当于初始的时候给设定了一个值。当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。

所以更多的时候会使用一个id进行标识，这样在初始化赋值的时候，只需要设定一个id就可以了。

$scope.engineer = {

currentActivityId: 3

}

$scope.activities =

[

{ id: 1, type: "Work" , name: "Writing code" },

{ id: 2, type: "Work" , name: "Testing code" },

{ id: 3, type: "Work" , name: "Fixing bugs" },

{ id: 4, type: "Play" , name: "Dancing" }

]

指令可以写成下面的格式

<select

ng-model = "engineer.currentActivityId"

class="form-control"

ng-options = "a.id as a.name group by a.type for a in activities" >

</select >

---