javascript - Vue双表单中继器

Question

我对 Vue.js 的表单转发器有一些问题。所以我想做的是，我想以重复（双）的形式创建一个表单转发器。例如，我正在创建具有包信息的包，您可以根据需要创建任意数量的包。我有一些无法正常工作的代码，它每次都重复相同的形式，即使它的功能不同：

这是转发器的模板：

    <b-row v-for="(pack, index) in form.packages" v-bind:key="index" :style="{animation: 'slideInDown 0.5s'}">

    <!-- Repeater starts here -->

    <b-form-input color="success" label-placeholder="Name" v-model="pack.name" name="package_name" type="text" />

    <b-form-input color="success" label-placeholder="qty" v-model="pack.qty" name="package_qty" type="number" />


    <!-- Here is second repeater (error is here)-->
    <b-row v-for="(pack, index) in form.packages.info" v-bind:key="index" :style="{animation: 'slideInDown 0.5s'}">

        <v-select id="country" v-model="pack.country" :options="selectCountries" :selectable="option => ! option.value.includes('select_value')" label="name" />

        <b-form-input color="success" label-placeholder="package_real_price" v-model="pack.real_price" name="package_slug" type="number" />

        <b-form-input color="success" label-placeholder="Sale Price" v-model="pack.sale_price" name="package_sale_price" type="number" />

        <b-form-input color="success" label-placeholder="Delivery Price" v-model="pack.delivery_price" name="package_delivery_price" type="number" />

        <!-- Remove Button -->
        <b-button v-ripple.400="'rgba(234, 84, 85, 0.15)'" variant="outline-danger" @click="deletePackageInfo(index)">
            <feather-icon icon="XIcon" class="mr-25" />
        </b-button>

    </b-row>

    <!-- Remove Button -->
    <b-button v-ripple.400="'rgba(234, 84, 85, 0.15)'" variant="outline-danger" @click="deletePackage(index)">
        <feather-icon icon="XIcon" class="mr-25" />
    </b-button>

    <b-button v-ripple.400="'rgba(113, 102, 240, 0.15)'" variant="outline-primary" pill @click="addPackageInfo">Add Package Info</b-button>

</b-row>

<b-button v-ripple.400="'rgba(113, 102, 240, 0.15)'" variant="outline-primary" pill @click="addPackage">Add Package</b-button>

因此，在这种情况下，只有第一个中继器按预期工作，但双倍（让我们这样称呼另一个中继器）它也在重复第一个中继器（不像预期的那样）。

所以这是我的脚本：

这是形式，现在我们只对 感兴趣packages: []，其他状态是相同的形式，但它们根据需要工作：

form: {
                sku: '',
                slug: '',
                category: '',
                type: '',
                product_info: [],
                packages: [],
            },

所以这里是第一个中继器的功能：

addPackage: function () {
       this.form.packages.push({
            name: '',
            qty: '',
        });
 },
        
 deletePackage: function (index) {
         this.form.packages.splice(index, 1);
 },

这是双中继器的功能：

        addPackageInfo: function () {
            this.form.packages.push({
                info: {
                    country: '',
                    real_price: '',
                    sale_price: '',
                    delivery_price: ''
                }
            });
        },

        deletePackageInfo: function (index) {
            this.form.packages.info.splice(index, 1);
        },

数据应该像这样被接收到后端：

packages: [
            {
                name: 'some name here',
                qty: 1,
                info: [
                    {
                        country: 12,
                        real_price: 12.22,
                        sale_price: 31.22,
                        delivery_price: 0
                    }
                ]
            }
        ]

我不是 Vue 或 Javascript 方面的专家，但我设法做到了，我相信现在还可以，但是如何解决这个问题呢？

标签： javascriptvue.jsvuejs2