Редактировать каждую строку отдельно в таблице данных Vuetify - PullRequest
Новая
       28

Редактировать каждую строку отдельно в таблице данных Vuetify

0 голосов
/ 18 апреля 2020

Моя цель - получить редактируемый столбец в каждой строке таблицы данных Vuetify. Я использовал v-edit-dialog для редактирования этого значения. Изначально я заполняю строки числом из другого компонента, переданного в виде пропа - количество . Затем мне нужно редактировать каждую строку независимо. Я думаю о новом массиве, чтобы сохранить отредактированное значение, но я получаю огромный массив нулей. 

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

Вот кодовая ручка: https://codepen.io/kamor04/pen/GRpqYwB

...