分别编辑数据表Vuetify中的每一行

Question

我的目标是在Vuetify数据表的每一行中获得可编辑的列。我使用v-edit-dialog编辑此值。最初，我使用作为道具传递的其他组件中的数字填充行- 数量 。然后，我需要独立编辑每一行。我正在考虑使用一个新数组来保存编辑后的值，但是我收到了大量的null。

<td class="text-xs-right">
 <v-edit-dialog
   large
   lazy
   persistent
 >
   <div class="text-xs-center">{{ QuantityDisplay() }}</div>
   <template v-slot:input>
     <v-text-field
       v-model="inputQuality"
       :rules="[max5chars]"
       maxlength="5"
       single-line
     />
   </template>
 </v-edit-dialog>
</td>

props: {
  quantity: {
     type: Number,
     default: 0
  }    
},
data () {
  return {
    newQuantity: [],
    inputQuality: null
  }
},
methods: {
  QuantityDisplay () {
    this.newQuantity.push(this.inputQuality)
    return this.newQuantity
  }
}

这是一个codepen：https://codepen.io/kamor04/pen/GRpqYwB