Добавить новые свойства к объекту, используемому в v-for

Question

Я хочу добавить данные (из двух v-text-fields) в компоненте моего продукта к моим данным, которые я передаю на сервер. Так что, если пользователь добавляет значения «444» и «230» к v-text-fields, запись будет иметь вид:

{
    "444": 230
}

До сих пор я жестко закодировал «444» и смог получить значение «230» прошло. Но как мне передать «444» и «230» в соответствии с пользовательскими данными из v-text-field?

продукта. vue

<v-content>
  <v-container>
    <code>formData:</code> {{ formData }}<br />
    <v-btn color="primary"  @click="create">Save</v-btn>
    (Check console)<br />
    <v-row>
      <v-col>
        <v-text-field v-for="(value, key) in formData" :key="key"
          label="Card Type" v-model="formData[key]"
          ></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</v-content>

data() {
  return {
    dialog: false,
    product: null,
    error: null,
    formData: {
      444: null,
    }
  }
},
methods: {
  async create() {
    try {
      await ProductService.create(this.formData);
    } catch (error) {
      this.error = error.response.data.message
    }
  }
}

Какие изменения я бы нужно сделать в моем компоненте так, чтобы formData основывался на пользовательском вводе от другого v-text-field?

Answer 1

Я помню ваш предыдущий вопрос . Чтобы добавить новый элемент к этому основанию c formData га sh, вы должны сделать что-то вроде этого:

<div>
   <v-text-field label="Product #" v-model="newKey"></v-text-field>
   <v-text-field label="Card Type" v-model="newValue"></v-text-field>
   <v-btn @click="$set(formData, newKey, newValue)">+</v-btn>
</div>

Это использует $set для добавления новых свойств в formData.