목차

1. 소개
2. 상황
3. 실제 코드
4. 끝에

1. 소개

v-for에서 사용하는 배열 안에 v-on에서 사용하고 싶은 메소드를 사용하는 방법을 알았으므로 정리하고 싶습니다.

2. 상황

v-for 안에 v-on 메서드를 사용하고 싶은 것은 다음과 같은 상황이 있었기 때문이었습니다.
표시된 메뉴에 이벤트를 추가하고 싶습니다.


vuetify 참조

3. 실제 코드

export default {
  data () {
    return {
      items: [
        { title: '編集', icon: 'mdi-pencil', action: 'edit' },
        { title: '削除', icon: 'mdi-delete', action: 'remove' }
      ]
    }
  }

보통 위와 같은 객체를 준비하고 v-for를 사용한다고 생각합니다. 이번은 action 에 클릭되었을 때에 발화하는 메소드가 있다고 합니다.

methods: {
    edit () {
      ・・・省略
    },
    remove () {
      ・・・省略
    },
    callAction (action) {
      this[action]
    },

① action과 같은 이름의 methods를 준비합니다.
② callaction에서는 브라켓 기법으로 기재합니다

         <v-list-item
              v-for="item in items"
              :key="item.text"
              link
              @click="callAction(item.action)"

③ callaction의 인수로서 item.action을 설정한다.
브라켓 기법에서는 도트 기법으로 설정할 수 없는 값도 설정할 수 있습니다.
브래킷이란?

4. 결론

도트 기법 밖에 사용한 적이 없었기 때문에, 브래킷 기법으로 간단하게 해결할 수 있다고는 모르고 괴로웠습니다. 매우 공부되었습니다.