v-for 루프에서 서로 다른 onClick 함수를 호출합니다.

v-for 루프에서 서로 다른 onClick 함수를 호출합니다.

루프 통과해야 하는 데이터 세트가 있지만 해당 데이터의 각 항목에는 서로 다른 onClick 이벤트가 있습니다.예를 들어 다음과 같은 것들이 있습니다.

list: [
  {
    text: 'a',
    icon: 'a-icon',
    onClick: () => {
      // do stuff a
    },
  },
  {
    text: '`b`',
    icon: 'b-icon',
    onClick: () => {
      // do stuff b
    },
  },
]

처음에 하려고 했던 건

<div v-for="(item, i) in list" :key="i" @click="item.onClick()"></div>

효과가 없었어요오류:

TypeError: item.onClick is not a function

그리고 나서 나는 시도했다:

<div v-for="(item, i) in list" :key="i" @click="list[i].onClick()"></div>

이상하게 생겼지만 효과가 있습니다.나만 접속할 수 없다this안에서.onClick기능.그냥 지나가면 돼this와 같은 기능에 직접 접속하여@click="list[i].onClick(this)"이상하게 보이기도 해요.

나는 내가 방법을 쓸 수 있고 할 수 있다는 것을 안다.switch지수에 의하면하지만 그 때 나는 그 편지를 써야 했다.onClick기능합니다.

더 좋은 방법이 있을까요?

const app = new Vue({
  el: "#app",
  data() {
    return {
      list: [{
          text: 'a',
          icon: 'a-icon',
          onClick: (item) => {
            let element = document.getElementById(item.text);
            console.log(element);
            console.log("Item" + item);
            console.log("Hi")
          },
        },
        {
          text: '`b`',
          icon: 'b-icon',
          onClick: (item) => {
            console.log("Item" + item);
            console.log("Hello")
          },
        },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(item, i) in list" :key="i" :id="item.text" @click="item.onClick(item)">{{item.text}}</div>
</div>

당신이 무엇을 의미하느냐에 달려있다.this. 입니다.this사용 중인 HTML 요소 또는 루프 중인 배열 요소.

<div v-for="(item, i) in list" :key="i" @click="item.onClick(item)"></div> //If `this` refers to the array element being looped

한다면this는, 그 루프내의 HTML 요소를 참조하고 있습니다.원하는 것을 할당할 수 있습니다.id아마:id="'item_list'+id"위의 메서드 파라미터로 전달합니다.그런 다음 메서드 내의 요소를 선택합니다.분명히 더 좋은 방법이 있긴 하지만 지금까지는 그렇게 생각할 수 있어요.

게다가 화살표 기능을 사용하고 있기 때문에, 화살표 기능은, 다음의 기능을 가지는 가장 가까운 부모를 가리킬 수 있습니다.this필요에 따라서, 익명 기능을 사용해 주세요.

언급URL : https://stackoverflow.com/questions/70029497/invoke-different-onclick-functions-in-a-v-for-loop