Vue.js 在数据表Vuetify中分别编辑每一行

我的目标是获得Vuetify数据表中每一行的可编辑列。我使用v-edit-dialog来编辑这个值。最初，我使用不同组件的一个数字填充行，该数字作为prop-数量传递。然后我需要独立地编辑每一行。我正在考虑一个新的数组来保存编辑后的值，但是我收到一个巨大的空数组

<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>

---

这是一个密码笔：

请澄清。您的意思是要分别编辑行中的每一列吗？您所尝试的内容与之有何不同？您需要内联内容编辑。它已经由vuetify团队制作。谢谢你们的回答。好的，我需要澄清一下。我在prop中传递一个值，并将其分配给一列中的每一行，因为我之前设置了默认值。当我使用v-edit-dialog并更改值时，它将在每一行中更改，但我希望分别编辑每一行。这就是为什么我试图将它保存在另一个变量中，或者数组中，我不知道正确的方法是什么。你应该创建一个代码笔来显示当前的行为以及你期望的是什么。下面是一个代码笔：当我收到包含许多空值的垃圾数据时，你可以看到当前的行为，或者你可以将变量更改为{quantity}和v-edit-dialog中的v-model=“quantity”，以查看默认行为。我的目标是独立编辑最后一列中的每一行。请澄清。您的意思是要分别编辑行中的每一列吗？您所尝试的内容与之有何不同？您需要内联内容编辑。它已经由vuetify团队制作。谢谢你们的回答。好的，我需要澄清一下。我在prop中传递一个值，并将其分配给一列中的每一行，因为我之前设置了默认值。当我使用v-edit-dialog并更改值时，它将在每一行中更改，但我希望分别编辑每一行。这就是为什么我试图将它保存在另一个变量中，或者数组中，我不知道正确的方法是什么。你应该创建一个代码笔来显示当前的行为以及你期望的是什么。下面是一个代码笔：当我收到包含许多空值的垃圾数据时，你可以看到当前的行为，或者你可以将变量更改为{quantity}和v-edit-dialog中的v-model=“quantity”，以查看默认行为。我的目标是独立编辑最后一列中的每一行。

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