Vue.js 将数组中的值发送到端点的问题答案

【问题标题】：Vue.js problem with send values in array to endpointVue.js 将数组中的值发送到端点的问题
【发布时间】：2020-07-26 08:44:23
【问题描述】：

我刚刚开始学习 Vue 来完成我的项目。我的后端是 Java Spring。我的终点期望对象具有值：

LocalDate date;
Long buyerId;
Long supplierId;
List<OrderDetailsDto> orderDetails;

我在 Vue 中的对象看起来像：

order: {
          date: '',
          buyerId: 0,
          supplierId: 0,
          orderDetails: [
              {
                  quantity: 0
                  product: {
                      id: 0
                  }
              }
          ]
      }

以及我对数量和产品的输入（只是这些值是问题）：

           <div class="form-group">
                <label>Ilość (m3)</label>
                <input type="number" id="quantity" class="form-control" v-model="order.orderDetails.quantity"/>
            </div>

            <div class="form-group">
                <label>Wybierz product</label>
                <select v-model="order.orderDetails.product">
                <option
                    v-bind:value="{id: product.id, name: product.product}"
                    v-for="product in products"
                    v-bind:key="product.id"
                >{{ product.product }}</option>
                </select>
            </div>

使用该设置，我的请求对象看起来像（即发送请求之前的 console.log）：

{__ob__: Observer}
  date: (...)
  buyerId: (...)
  supplierId: (...)
  orderDetails: Array(1)
    quantity: "22"
    product: Object
    0:
    quantity: 0
    product: Object

这就是问题所在。我在 Vue 中声明的变量在 orderDetails 中的索引 [0] 处。上面的那些值（数量：“22”，产品：对象）没有发送，我的终点认为数组是空的。如果我从 Vue 对象的数组中删除值，console.log 看起来不错，但我的终点看不到数组中的值。

有人知道如何解决这个问题吗？

【问题讨论】：

您是否检查了通过网络发送的内容是否实际发送到您的端点？
另外，您的端点是否能够处理字符串或数字的数量？
在我得到的端点： CreateOrderRequest(date=2020-02-02, buyId=1, supplierId=1, orderDetails=[OrderDetailsDto(quantity=0, buySum=null, supplierSum=null, product =ProductDto(id=0, product=null), orderComment=null)])
orderDetails 应该是一个数组吧？您的 v-model 正在将 orderDetails 上的属性“product”设置为产品对象。看起来您还将“数量”设置为 orderDetails 上的属性。
您是否希望设置v-model="orderDetails[0].product"？还是您的意思是在 orderDetails 数组上推送/弹出？

标签： javascript arrays vue.js axios

【解决方案1】：

添加data: {currquantity:0, currproduct: {id: null, name: null}}

           <div class="form-group">
                <label>Ilość (m3)</label>
                <input type="number" id="quantity" class="form-control" v-model="currproduct.quantity"/>
            </div>

            <div class="form-group">
                <label>Wybierz product</label>
                <select @change="order.orderDetails.push({quantity: currquantity, ...currproduct})" v-model="currproduct">
                <option
                    v-bind:value="{id: product.id, name: product.product}"
                    v-for="product in products"
                    v-bind:key="product.id"
                >{{ product.product }}</option>
                </select>
            </div>

您可能想要创建如下所示的内容来处理显示到目前为止已添加的内容以及删除添加项目的能力：

<ul>
<li v-for="(detail, i) in order.orderDetails">{{JSON.stringify(detail)}}
  <button @click="order.orderDetails.splice(i,1)">X</button>
</li>
</ul>

【讨论】：