텍스트 입력 시 확장 가능한 행이 축소되는 Vuetify 데이터 테이블

텍스트 입력 시 확장 가능한 행이 축소되는 Vuetify 데이터 테이블

행을 클릭하여 펼치면 입력 필드가 추가되어 있습니다.필드에 값을 입력하려고 하면 행이 접힙니다.

코드는 다음과 같습니다.

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Sodium (mg)', value: 'sodium' },
        { text: 'Calcium (%)', value: 'calcium' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      items: [
        {value: false, name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%'},
        {value: false, name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%'}
      ]
    }
  }
})

<link rel="stylesheet" href="https://unpkg.com/vuetify@0.17.7/dist/vuetify.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.17.7/dist/vuetify.min.js"></script>

<div id="app">
    <v-app id="inspire">
      <v-data-table
        :headers="headers"
        :items="items"
        hide-actions
        item-key="name"
      >
        <template slot="items" slot-scope="props">
          <tr @click="props.expanded = !props.expanded">
            <td>{{ props.item.name }}</td>
            <td class="text-xs-right">{{ props.item.calories }}</td>
            <td class="text-xs-right">{{ props.item.fat }}</td>
            <td class="text-xs-right">{{ props.item.carbs }}</td>
            <td class="text-xs-right">{{ props.item.protein }}</td>
            <td class="text-xs-right">{{ props.item.sodium }}</td>
            <td class="text-xs-right">{{ props.item.calcium }}</td>
            <td class="text-xs-right">{{ props.item.iron }}</td>
          </tr>
        </template>
        <template slot="expand" slot-scope="props">
          <v-card flat>
            <v-card flat="flat" color="grey lighten-4">
              <v-container fluid="fluid" grid-list-xl="grid-list-xl">
                <v-layout row="row" wrap="wrap">
                  <v-flex sm3="sm3">
                    <v-text-field label="Calories" v-model="props.item.name"></v-text-field>
                  </v-flex>
                  <v-flex sm3="sm3">
                    <v-text-field label="Calories" v-model="props.item.calories"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card>
          </v-card>
        </template>
      </v-data-table>
    </v-app>
  </div>

여기 제 코드펜 링크가 있습니다. 위와 같은 코드입니다.https://codepen.io/syed-haroon/pen/vdGExX

내 질문에 대한 답변은 해킹이고 그 문제는item-key, 제가 한 일은 다음과 같습니다.

// Changing from:
<v-data-table :headers="headers" :items="items" item-key="name">

// Changed to:
<v-data-table :headers="headers" :items="items" item-key="dummyIndexFixForCollapseIssue">

// in `data` using generated random value for 
data () {
  return {
    items: [
      {dummyIndexFixForCollapseIssue: this.generateRandomNumber(), name: 'Frozen Yogurt', calories: 159},
      {dummyIndexFixForCollapseIssue: this.generateRandomNumber(), name: 'Ice cream sandwich', calories: 237}
    ]
  }
}

// here is the `method` to generating random value 
methods: {
  generateRandomNumber () {
    return Number(Math.floor(Math.random() * 90000) + 10000)
  }
}

언급URL : https://stackoverflow.com/questions/48600961/vuetify-data-table-with-expandable-rows-getting-collapse-when-text-inputted