CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Syed
Syed

Reputation: 16513

Vuetify Data table with expandable rows getting collapse when text inputted

When I click and expand the row, I have added input fields, when I try to input any values into the fields the row gets collapsed.

here is my code:

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/[email protected]/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/[email protected]/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>

Here is the link to my codepen, same code as above. https://codepen.io/syed-haroon/pen/vdGExX

Upvotes: 4

Views: 7037

Answers (1)

Syed
Syed

Reputation: 16513

Answer to my question, which is kinda hack & the issue was due to item-key, here is what I did:

// 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)
  }
}

Upvotes: 3

Related Questions