vuetify v-data-table row selection

# https://vuetifyjs.com/en/components/data-tables/#row-selection

# vuetify v-data-table 에서 show-select 속성을 활성화면

# row 별로 check box 가 활성화 된다.

# v-model 지시자로 선택 한 row item 데이터를 파악할 수 있다.

<v-data-table

    :loading="loadingmyItem"

    loading-text="Loading... Please wait"

    :headers="myItemHeaders"

    :items="myItems"

    v-model="selectedItems"

    :single-select="false"

    show-select

></v-data-table>

# v-model 로 사용할 리스트 변수

export default {

  data() {

    return {

      selectedItems: [],

...

# data-table-select 값의 헤더를 사용해서 check box 속성을 커스터마이징 할 수 있다.

myItemHeaders: [

{

    text: "선택",

    value: "data-table-select",

    align: "center",

    class: "subheading font-weight-bold grey darken-2 white--text",

}

# [삽질 경험]

# row 선택(체크)해도 selectedItems 이 계속 [] 로 값이 변하지 않았다.

# v-model 바인딩을 :v-model 로 속성설정으로 잘못 사용한게 원인인데

# :v-model 해도 vuetify 에러메시지가 없어 몇시간을 삽질했다.ㅠ