Vuejs - 이벤트 위임 및 컨텍스트 참조용 v-

Vuejs - 이벤트 위임 및 컨텍스트 참조용 v-

다음 스니펫을 사용하여 목록을 렌더링합니다.

<div @click.prevent="myhandler($event)"><!-- Delegated event handler-->
    <div class="tasks" v-for="(task, subName) in step.tasks">
        <button type="button">
            {{ task.caption }}
        </button>
        <span> {{ task.callableName }} </span>
    </div>
</div>

methods: {
    myhandler(e){
        // Event target may be a button element.
        let target = e.target;
        // …
        // Let's assume we know 'target' is a button element instance.
        // I wish I could have access to the v-for item ("task") which is associated in some ways to the button that was clicked.
        // let the_task_reference = ?;
    }…

내가 그 집에 갈 수 있는 깨끗한 방법은 없을까?v-for해당 버튼과 관련된 특정 작업 범위
감사합니다.

다른 방법으로는 버튼에 작업 인덱스를 저장하는 방법이 있습니다.

<div class="tasks" v-for="(task, index) in step.tasks">
    <button type="button" :data-index="index">
        {{ task.caption }}
    </button>
    <span> {{ task.callableName }} </span>
</div>

그리고 인덱스를 사용하여 핸들러에서 작업을 가져옵니다.

myhandler(evt){
  const task = this.step.tasks[evt.target.dataset.index]
  ...
}

예.

만약 당신이 더 강한 무언가를 가지고 있다면id더 좋을 것 같아요.

권장하지 않음

숨겨진 재산이 있어요__vue__Vue 및 컴포넌트 루트 요소에 추가됩니다.컴포넌트에 대해 반복하면 이 예시와 같은 작업을 수행할 수 있습니다.

버전마다 변경될 수 있는 Vue의 내부 기능에 크게 의존하고 있기 때문에 이 접근방식은 권장하지 않습니다만, 현재는 사용되고 있습니다.

가장 간단한 해결책은 이벤트 핸들러를 같은 위치에 두는 것입니다.div처럼v-for지시하고 그냥 통과시켜 주세요.task변수:

<div 
  class="tasks" 
  v-for="(task, subName) in step.tasks"
  @click.prevent="myhandler(task, $event)"
>
  <button type="button">{{ task.caption }}</button>
  <span>{{ task.callableName }}</span>
</div>

---

상위 요소에서 이벤트 핸들러를 사용해야 하는 경우 컴포넌트 속성을 통해 클릭된 작업을 추적하고 추가 클릭 핸들러를 사용하여 div에 추가할 수 있습니다.v-for지시:

<div @click.prevent="myhandler($event)"
  <div 
    class="tasks" 
    v-for="(task, subName) in step.tasks" 
    @click="clickedTask = task"
  >
    <button type="button">{{ task.caption }}</button>
    <span>{{ task.callableName }}</span>
  </div>
</div>

추가가 필요합니다.clickedTask속성:

data() {
  return {
    clickedTask: null,
  }
}

다음으로 핸들러에서 다음 방법으로 작업을 참조할 수 있습니다.this.clickedTask.

언급URL : https://stackoverflow.com/questions/43920955/vuejs-event-delegation-and-v-for-context-reference