在循环定义的错误中推送附件：RangeError：超出最大调用堆栈大小“答案

【问题标题】：Pushing attachments on loop defined ERROR: RangeError: Maximum call stack size exceeded"在循环定义的错误中推送附件：RangeError：超出最大调用堆栈大小“
【发布时间】：2021-08-15 01:16:32
【问题描述】：

我有一个表单，它有一个+ ADD 按钮来动态添加另一个表单。在每个表单中，它有两个输入作为co_number，attachments 我想通过axios 将每个表单存储在 MySQL 上，以下是我尝试过但没有工作的。有没有合适的解决方案来解决这个问题？

模板

<template>
<div id="Tasks">
<v-row v-for="(i, k) in formList" :key="k">
  <v-col md="1" sm="3" cols="12">
    <!-- REMOVE ROW BUTTON -->
    <v-btn color="red" v-if="formList.length > 1" @click="remomvePOList(k)">
      <v-icon>
        mdi-delete
      </v-icon>
    </v-btn>

    <!-- ADD ROW BUTTON -->
    <v-btn
      color="blue"
      v-if="k == formList.length - 1"
      @click="addNewPO(k)"
    >
      <v-icon>mdi-plus</v-icon>
    </v-btn>
  </v-col>
  <v-col md="2" sm="3" cols="12" class="">
    <v-text-field v-model="i.co" label="CO Number" dense hide-details="">
    </v-text-field>
  </v-col>

  <v-file-input
    v-model="i.attachments"
    multiple
    label="ATTACHMENTS"
    @change="onAttachmentSelected($event, k)"
  >
  </v-file-input>
  <v-btn @click="save">SAVE</v-btn>
</v-row>


<script>
export default {
  data() {
    return {
      formList: [{ co: "", attachments: [] }],
    };
  },
  methods: {
    addNewPO(e) {
      this.formList.push({
        co: "",
        attachments: [],
      });
    },
    remomvePOList(e) {
      this.formList.splice(e, 1);
    },
    onAttachmentSelected(e, k) {
      this.formList[k].attachments.push(e);
      // ERROR: RangeError: Maximum call stack size exceeded"
    },
    save() {
      // axios post request
    },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js vuejs2 axios

【解决方案1】：

已解决 对象表示具有特征（也称为属性）的“事物”，而数组则在单个变量中创建和存储数据列表。点和括号表示法都允许我们访问、添加、更改和删除对象中的项目，而从零开始的索引和各种内置方法允许我们访问和更改数组中的项目。最后，我们可以使用各种循环（例如 for、for...in、for...of、forEach()）迭代对象属性和数组项

onAttachmentSelected(e, k) {
  console.log('e',e)
  console.log('k',k)
  this.formList[k].attachments = Object.assign(e)
  console.log(this.formList)
},

【讨论】：

【解决方案2】：

<v-file-input
    v-model="i.attachments"
    multiple
    label="ATTACHMENTS"
    @change="onAttachmentSelected($event, k)"
  >
  </v-file-input>

如果v-file-input 发生更改，i.attachments 会更新，因为它绑定到 v-model。但是，onAttachmentSelected 函数再次更改i.attachments，这没有任何意义。我们要记住的是，绑定到模型的变量会自动更新，我们不需要在事件回调函数中更改值。

根据这个想法，我们是否需要推送e，即使我们从<v-file-input> 中删除一个？

所以只需评论并使用它，而不用担心更新 this.formList[k].attachments 手动。

onAttachmentSelected(e, k) {
  // this.formList[k].attachments.push(e);
  // put rest functionalities here
}

【讨论】：

输入v-file-input可以动态生成，所以需要e来管理数组