输入文本时带有可扩展行的 Vuetify 数据表折叠答案

【问题标题】：Vuetify Data table with expandable rows getting collapse when text inputted输入文本时带有可扩展行的 Vuetify 数据表折叠
【发布时间】：2018-07-14 00:48:29
【问题描述】：

当我单击并展开该行时，我添加了输入字段，当我尝试在字段中输入任何值时，该行被折叠。

这是我的代码：

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>

这是我的 codepen 的链接，与上面的代码相同。 https://codepen.io/syed-haroon/pen/vdGExX

【问题讨论】：

看起来当您输入文本时它会折叠该行，因为它会重新绘制该行。但是还有更多事情要做，因为当我打开和关闭多行时，我在一行中输入的文本将开始更新完全不同的行。
@btl，我已经为我的问题添加了答案，请检查这是否有意义？无论如何，它对我有用。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

回答我的问题，这有点骇人听闻，问题是由于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)
  }
}

【讨论】：