向 v-for 中使用的对象添加新属性

Question

我想将我的产品组件中的数据（来自两个 v-text-fields）添加到我传递给服务器的数据中。因此，如果用户将值“444”和“230”添加到 v-text-fields，条目将是：

{
    "444": 230
}

到目前为止，我已经对“444”进行了硬编码，并设法获得了值“230”。但是我如何根据来自 v-text-field?

的用户输入同时传递“444”和“230”

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

我记得。要向该基本 formData 哈希添加一个新项目，您可以这样做：

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

向 v-for 中使用的对象添加新属性

Add new properties to an object used in v-for

javascript

vue.js

vue-component

vuejs2

v-for