Question

我被困住了，可以朝正确的方向轻推！

概述：

我将Laravel集合传递给我的Vue.js组件（:collections_prop="{{ $collection }}"）。我正在使用<tr v-for遍历组件中的集合。每个<tr>内都是一个带有<select>元素的表单。

我要完成的任务：

当我更改单个<select>时，表单应提交该特定项目order_id并将其包括到后端。

出了什么问题：

我的表按预期显示，我可以看到与每个order_id's相关联的单独的<tr>。表单提交，但 __仅用于第一项__ 。

示例：

第一个collection的{{1}}为10，order_id为5。如果我选择一个新的数量，则表单将以该qty和更新的{ {1}}。完美！

但是，如果我更改任何其他order_id标签，则第一行的qty和<select>是唯一提交的信息。

order_id

我尝试过的事情：

要发布的东西太多了，但重点是我尝试过切换

qty

为此

<template> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <table class="table table-sm"> <thead> <th scope="col">Product</th> <th scope="col">Quantity</th> <th scope="col">$</th> <th scope="col"><i class="fas fa-trash-alt"></i></th> </thead> <div v-if="collections.length"> <tr v-for="collection in collections" :key="collection.order_id"> <td>{{ collection.description }}</td> <td> <form @submit="updateQty"> <input type="hidden" name="type" :value="'qty'" id="type" /> <select class="form-control" id="qty" @change="updateQty" > <option :value="collection.qty" >{{ collection.qty }}</option> <option v-for="(x, index) in 200" :value="x-1" :key="index" >{{ index }}</option> </select> </form> </td> <td>{{ collection.value }}</td> <td>{{ collection.order_id }}</td> </tr> </div> </table> </div> </div> </div> </template> <script> export default { props: ['collections_prop'], data() { return { collections: this.collections_prop, qty: '', type: '', value: '', order_id: '', }; }, mounted() { console.log('DisplayTable.vue mounted successfully'); var type = document.querySelector('#type').value; }, methods: { updateQty(e) { e.preventDefault(); let url = '/update'; /** Uncomment to see variables being posted */ console.log('Order id: ' + order_id.value + ', QTY: ' + qty.value); axios.post(url, { qty: qty.value, type: type.value, order_id: order_id.value, }) .then(response => { this.collections = response.data; console.log('Form submitted'); }) }, } } </script>，但没有运气。

我也尝试将<tr v-for="collection in collections" :key="collections.order_id">添加到<tr v-for="(collection, index) in collections" :key="index">标记中，我认为这是我出错的地方，但我无法解决。

我尝试过：

v-model，这将导致<select>不会显示在<select id="qty" @change="updateQty" v-model="collection.order_id">标签内。

我已经读过关于handling forms和form input bindings的信息，我确定其中包含了答案，但是我无法绕开它。

任何帮助甚至示例链接都可以帮助我。提前非常感谢您！

Answer 1

您需要在此处解决一些问题。首先，它似乎并不是真正必需的形式，因此我在示例中省略了它。如果您出于任何原因确实需要它，重新添加都不会造成伤害。

您选择的change事件不会将任何数据传递回updateQty方法，因此它不知道如何获取您应该发送给API的任何数据。如果将选择更改为以下形式，则该行的正确顺序将传递回该方法：

 <select @change="() => change(event, item)" v-model="item.qty">
    <option v-for="(x, index) in 200" :value="x" :key="index" >{{x}}</option>
 </select>

此外，请注意，我删除了您选择的第一个选项。那将导致您有重复项-如果您的订单之一的qty设置为4，则4将首先显示在下拉列表中，然后显示在e之后（看起来像4,1,2,3,4等）。通过将v-model设置为collection.qty（而不是collection.order_id），选择将始终包含该行的collection.qty值-如果qty为5，则选择将自动选择5。

现在，我们可以将更改处理程序设置如下：

updateQty(event, order) {
  alert(`New quantity: ${order.qty}`)

  var postObject = {
    qty: order.qty,
    type: 'Wherever this comes from',
    order_id: order.order_id,
  }

  let url = '/update';
  console.log(event)

  /** Uncomment to see variables being posted */
  console.log('Order id: ' + postObject.order_id + ', QTY: ' + postObject.qty);

        // Do your post
  axios.post(url, postObject)
}

order参数将始终是来自已更改行的收集项。现在，每次任何选择更改时，您的updateQty方法都可以准确指出其执行顺序。由于v模型是2向绑定的，所以collection.qty也会自动更新。

这是一个JSFiddle，显示了所有这些代码的工作：http://jsfiddle.net/q4cLoz02/3/

Answer 2

查看代码的这一部分：

<select class="form-control" id="qty" @change="updateQty" >
 <option :value="collection.qty" >{{ collection.qty }}</option>
 <option v-for="(x, index) in 200" :value="x-1" :key="index" >{{ index }}</option> 
</select>

您可以将此HTML迭代到集合中的所有项目，对吗？好的，用户更改了select元素的选定值，并触发了@chagne事件。现在的问题是HOW IT SHOULD UNDERSTAND WHAT COLLECTION QTY SHOULD CHANGE?。

尝试一下：

<select class="form-control" id="qty" @change="() => updateQty(event, collection.id)" >
 <option :value="collection.qty" >{{ collection.qty }}</option>
 <option v-for="(x, index) in 200" :value="x-1" :key="index" >{{ index }}</option> 
</select>

还有updateQty方法：

updateQty(e, order_id) {
 var newQty = e.target.value;
 alert(`${order_id} quantity has changed to ${newQty}`)
 // call rest ...
 // 
}

我创建了一个JSFiddle示例here。

Vue-js v-for仅在axios POST上发布第一条记录

示例：

我尝试过的事情：

2 个答案: