[vue] v-data-table 더블클릭 시 행(row) 정보 가져오기 (Get row data when you click double on specific row on v-data-table)

@dbclick:row

더블클릭 시 선언한 showRowInfo 함수 호출

- 호출할때 파라미터, 즉 로우데이터를 가져오는 부분을 못찾았는데, 아래 출처를 통해서 정보를 얻었다.

item을 가져와서 items에 대한 index정보와 선택한 row에 대한 데이터를 Object.assign({},item)으로 가져올 수 있었다.

 

추가로 @context:row

우클릭 시 함수를 호출 가능하다.

이때 v-menu를 숨겨놓고 true/false로 제어가 가능하다.

 

 

소스코드

vue template 

<v-data-table
        :headers="headers"
        :items="items"
        :search="searchQuery"
        :items-per-page="6"
        class="flex-grow-1"
        @contextmenu:row=showAdminMenu
        @dblclick:row=showRowInfo
      >

 

JS script

   showRowInfo (event, { item } ) {
      console.log(item)
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = Object.assign({}, item)
      console.log(this.editedIndex)
      console.log(this.editedItem)
    }

 

 

출처 :

https://stackoverflow.com/questions/67788349/vuetify-how-to-get-row-by-double-click-event-in-v-data-table

Vuetify, how to get row by double click event in v-data-table