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

Question

我被卡住了，可以向正确的方向轻推!

概述:

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

我想要完成的事情:

当我改变一个人时<select> , 表格应提交并包含特定项目 order_id到后端。

出了什么问题:

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

示例:

第一个collection有一个 order_id 10 和一个 qty共 5 个。如果我选​​择一个新的数量，表单会随即提交 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"> ，这会导致 {{ collection.qty }}不显示在 <option> 内标签。

我读过 handling forms和 form input bindings ，我确定其中包含答案，但我无法理解它。

任何帮助甚至示例链接都会真正帮助我。非常感谢您!

Answer 1

这里有几个问题您需要注意。首先，表格似乎并不是真正必需的，所以我将其排除在示例之外。如果您出于某种原因确实需要它，重新加入也没有什么坏处。

您选择的更改事件不会将任何数据传回给 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>

另外，请注意我删除了您选择的第一个选项。这会导致您重复 - 如果您的一个订单的数量设置为 4，则 4 将首先出现在下拉列表中，然后出现在 e 之后(看起来像 4、1、2、3、4 等)。通过将 v-model 设置为 collection.qty(而不是 collection.order_id)，select 将始终包含该行的 collection.qty 的值 - 如果 qty 为 5，select 将自动选择 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)
}

顺序参数将始终是已更改行中的集合项。现在，每次任何选择更改时，您的 updateQty 方法都可以准确地告诉它是针对哪个订单的。 collection.qty 也会自动更新，因为 v-model 是双向绑定(bind)的。

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