我正在尝试处理v-for
呈现的组件发出的事件。
例如,我创建了一个combobox
组件,它在更改值时发出事件。
它通过this.$emit('item_change', item);
发出事件。
我想为相应的用户处理此事件。
在下面的代码中,我希望在更改user
的combobox
值时更改用户的status
值。
当使用v-on:item_change="status_change"
时,它获取item
作为参数
example
但是,尽管combobox
使用item
发出事件,但它没有将item
作为v-on:item_change="status_change(item , user)"
中的参数,并且user
的status
保持原始值。
如何解决此问题?
JSFiddle Example
<div id="mainapp">
<table>
<thead>
<th>Name</th><th>Status</th>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td><combobox v-bind:default="user.status" v-bind:data="status_codes" v-on:item_change="status_change(item, user)"></combobox></td>
</tr>
</tbody>
</table>
</div>
JS代码
var combobox = Vue.component('combobox', {
data: function () {
return {
selected_item:{title:'Select', value:-1},
visible:false
}
},
props:['data','default','symbol'],
template: `
<div class="combobox">
<span class="symbol" v-if="!symbol">
<i class="fa fa-chevron-down" aria-hidden="true" ></i>
</span>
<span class="main" v-on:click="toggleVisible">{{selected_item.title}}</span>
<ul class="combodata" v-if="visible">
<li class="item" v-for="item in data" v-on:click="select(item)">{{item.title}}</li>
</ul>
</div>
`,
created:function(){
if(this.data.length>0){
if(this.default == null || this.default == undefined || this.default =='') this.default=0;
this.selected_item = this.data[this.default];
}
},
methods:{
toggleVisible:function(){
this.visible = !this.visible;
},
select:function(item){
if(this.selected_item != item){
this.selected_item= item;
this.$emit('item_change', item);
}
this.visible = false;
}
}
});
var app=new Vue({
el:"#mainapp",
data:{
status_codes:[{title:'Inactive', value:0},{title:'Active', value:1}],
users:[{name:'Andrew', status:1},{name:'Jackson', status:0},{name:'Tom', status:1}]
},
methods:{
status_change:function(item,user){ //This gets only the parameter from the event. How could I pass the additional parameters to this function?
console.log(item,user);
try{
user.status = item.value;
}catch(e){ console.log}
}
}
});
3条答案
按热度按时间yacmzcpb1#
您需要将
$event
而不是item
传递给status_change
处理程序JSFiddle
See the Vue docs here about event handling:有时我们还需要在内联语句处理程序中访问原始DOM事件。
kq4fsx7k2#
使用
$event
你需要的实际上是
v-on:item_change="status_change($event , user)"
。当您执行
this.$emit('item_change', whatever);
时,whatever
会在事件侦听程式中变成$event
。https://jsfiddle.net/jacobgoh101/bLsw085r/1/
rggaifut3#
尝试将参数传递给函数,如下所示:
并在函数声明中指定参数: