我如何使用 Vue axios 从从 API 获得的数据发布数组数据

Question

我遇到了一个问题，我有一个表单，其输入是根据 API 返回的结果动态生成的。 我可以用 Axios 成功获取数据，但问题是当我想将用户输入的数据数组发布回 api 时，我不能。

模板如下所示：

<form @submit.prevent="getReference" class="form-material form-horizontal">
  <div class="row">
    <div class="col-md-6"
      v-for="(item, index) in items"
      :key="item.id">
      <div class="card bg-light-inverse ribbon-wrapper">
        <div class="card-block">
          <div class="ribbon ribbon-danger">{{index + 1}}</div>
          <div class="row ribbon-content">

            <input v-model="item.id" />
            <label class="col-md-12 text-themecolor">Enter Amount To Pay</label>
            <div class="card col-md-12 m-t-10">
              <input
                v-model.number="item.amount"
                type="number"
                class="form-control"
                placeholder
                max
                min
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button
    class="btn btn-rounded btn-outline-danger waves-effect waves-dark"
  >Get Refrence</button>
</form>

JS代码是：

export default {
  data() {
    return {
      items: {},
      item: []
    };
  },
  created() {
    let uri = `/Api/${this.$route.params.id}/items`;
    this.axios.get(uri).then(response => {
      this.items = response.data;
    });
  },
  // could go with computed method to check if there is data but well :
  methods: {
    getReference() {
      console.log(this.item);
      let uri = "/api/reference";
      this.axios.post(uri, this.item).then(response => {
        this.$router.push({ name: "fee" });
      });
    },
  }
};

当我尝试发布表单时，没有发送任何内容，并且在控制台uncaught exception: Object 。 我似乎无法弄清楚这里出了什么问题。

任何帮助，将不胜感激。

Answer 1

您将items作为模板部分中的item循环，并使用item来绑定输入。 发送时，您正在使用this.item中的axios 。

输入数据绑定到items本身，因为您正在循环它。 您可以尝试发送items而不是 axios 部分中的item 。

  methods: {
    getReference() {
      console.log(this.item);
      let uri = "/api/reference";
      this.axios.post(uri, this.items).then(response => {
        this.$router.push({ name: "fee" });
      });
    },
  }

您可以删除数据部分中的item ，因为在输入部分中使用相同的项目绑定值时会导致问题。