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

Posted 2023-02-23

【中文标题】为 v-for 中使用的对象添加新属性

【英文标题】：Add new properties to an object used in v-for

【发布时间】：2020-08-03 17:08:34

【问题描述】：

我想将我的产品组件中的数据（来自两个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 的用户输入？

【参考方案1】：

我记得your previous question。要将新项目添加到基本的 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。