Vuejs的v-for中如何处理组件发出的事件答案

【问题标题】：How to process the emitted event from the component in v-for of VuejsVuejs的v-for中如何处理组件发出的事件
【发布时间】：2018-09-18 23:19:15
【问题描述】：

我正在尝试处理由v-for 呈现的组件发出的事件。
例如，我制作了一个combobox 组件，它在更改值时会发出事件。
它通过this.$emit('item_change', item); 发出事件。
我想为对应的用户处理这个事件。
在下面的代码中，我想在更改user的combobox的值时更改用户的status值。
当使用v-on:item_change="status_change"
example
时，它得到item作为参数但是它没有将item 作为v-on:item_change="status_change(item , user)" 中的参数，尽管combobox 使用item 发出事件，并且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}
     }
  }
});

【问题讨论】：

如何将user 的index 传递给组件？
@talent_developer 没有其他解决方案吗？然后它不能在全球范围内使用。我想是的。
找出解决方案。

标签： vue.js vuejs2 vue-component

【解决方案1】：

使用$event

你需要的其实是v-on:item_change="status_change($event , user)"。

当您执行this.$emit('item_change', whatever); 时，whatever 将在事件侦听器中变为$event。

https://jsfiddle.net/jacobgoh101/bLsw085r/1/

【讨论】：

【解决方案2】：

您需要将$event 传递给您的status_change 处理程序，而不是item

<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($event, user)"></combobox>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JSFiddle

See the Vue docs here about event handling

有时我们还需要在内联语句处理程序中访问原始 DOM 事件。您可以使用特殊的 $event 变量将其传递给方法

【讨论】：

【解决方案3】：

尝试像这样将参数传递给您的函数：

v-on:item_change="status_change(item, user)"

在你的函数声明中，指定参数：

status_change: function (item, user) {
   console.log(item, user);
}

【讨论】：