v-for of Vuejs의 구성 요소에서 내보낸 이벤트를 처리하는 방법

v-for of Vuejs의 구성 요소에서 내보낸 이벤트를 처리하는 방법

에 의해 렌더링된 컴포넌트에서 방출된 이벤트를 처리하려고 합니다.v-for.
예를 들어, 제가 만든 것은combobox값을 변경할 때 이벤트를 내보내는 컴포넌트.
이벤트를 방출하는 방법:this.$emit('item_change', item);.
해당 사용자를 위해 이 이벤트를 처리하고 싶습니다.
아래 코드에서, 저는 다음 코드를 변경하고 싶습니다.status사용자 값 변경 시combobox의user.
이 되다item사용할 때 매개 변수로v-on:item_change="status_change"
예
하지만 그게 무슨 뜻이죠?item파라미터로서v-on:item_change="status_change(item , user)"그래도combobox이벤트를 방출하다item,그리고.status의user원래 값을 유지합니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

JSFiddle의 예

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

사용하다$event

네가 필요한 건 사실v-on:item_change="status_change($event , user)".

할 때this.$emit('item_change', whatever);,whatever될 것이다$event이벤트 청취자 중 한 명.

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

합격해야 합니다.$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

이벤트 처리에 대해서는, 여기를 참조해 주세요.

인라인 스테이트먼트핸들러의 원래 DOM 이벤트에도 액세스 할 필요가 있는 경우가 있습니다.특별한 $event 변수를 사용하여 메서드에 전달할 수 있습니다.

다음과 같이 매개변수를 함수에 전달해 보십시오.

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

함수 선언에서 다음 파라미터를 지정합니다.

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

언급URL : https://stackoverflow.com/questions/52387523/how-to-process-the-emitted-event-from-the-component-in-v-for-of-vuejs