如何在 VueJS 的 v-for 循环中定义起点答案

【问题标题】：How to define a starting point in a v-for loop in VueJS如何在 VueJS 的 v-for 循环中定义起点
【发布时间】：2020-07-28 15:35:40
【问题描述】：

我有一组在循环中无限次生成的字段。基本上 2 个输入字段、一个标签和一个删除按钮。然后是另一个显示添加更多的按钮。

每次他们击中那个时，就会出现另外一组上述内容。他们可以根据需要多次执行此操作。它看起来像这样。（我使用的是类星体，因此为什么使用 q-"" 元素）

// Click more button
<q-btn @click="onAddBarcodes" icon="add" no-caps color="primary">Add More</q-btn>


// Form
<div v-for="(barcode, index) in barcodes" :key="index">
    <div class="row q-pr-lg items-center">
        <div class="col-3">
             <label class="text-weight-medium">Starting Roll #:</label>
             <q-input v-model="barcode.start" :id="barcode.id"></q-input>
        </div>
        <div class="col-3">
             <label class="text-weight-medium">Ending Roll #:</label>
             <q-input v-model="barcode.end" :id="barcode.id"></q-input>
        </div>
        <div class="col-5">
             <label class="text-weight-medium">Agency Name:</label>
             <div v-if="barcode.agencyName">
                 {{ barcode.agencyName }}
             </div>
        </div>
        <div class="col-1">
             <q-btn @click="onDeleteBarcodes(barcode.id)" icon="close"/>
        </div>
    </div>
</div>


export default {
    data() {
        return {
            barcodes: []
        }
    },
    methods: {
        onAddBarcodes() {
            const newBarcode = {
                id: Math.random() * Math.random() * 1000,
                start: "",
                end: "",
                agencyName: ""
            };
            this.barcodes.push(newBarcode);
        },
        onDeleteBarcodes(id) {
            this.barcodes = this.barcodes.filter(barcode => barcode.id !== id);
        },
    }
 }

现在这是最基本的形式。我想要做的是加载已经开始了一定数量的迭代的组件。例如，其中 5 个。

如果他们需要更多，“添加更多”按钮将向前添加第 6 个。如果他们愿意，删除按钮应该删除到零（不是他们会），但它绝对应该至少删除到 1。

如何在特定的迭代次数处启动v-for？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以在 created() vue 实例上向 barcodes 添加 5 个项目，例如：

created() {
    [...Array(5).keys()].forEach(() => this.onAddBarcodes())
}

【讨论】：

起初，我以为 Anurag 有一个非常简单的答案，但这个答案要简单得多，而且我已经在我创建的生命周期中使用了 onAddBarcodes，所以这对我来说会更简单、更清洁、更高效
您也可以结帐Difference between the created and mounted events in Vue.js。它总是要为这些精彩的内容添加书签以供将来参考。
不错，我还以为我的是最短的 :)
我没有测试过这个，但我认为我们可以让它更短，比如：[...Array(5).keys()].forEach(this.onAddBarcodes)。 @LOTUSMS 请您验证一下。
@palaѕн 正确！更短的版本也有效

【解决方案2】：

您可以在beforeMount中调用onAddBarcodes n次：

beforeMount(){
   const n = 5; // Or any number
   Array.from(new Array(n)).forEach(el => this.onAddBarcodes());
}

【讨论】：

【解决方案3】：

您可以在此处添加挂载钩子并使用 5 个元素初始化集合

export default {
    data() {
        return {
            barcodes: []
        }
    },
    mounted() {
     this.barcodes = Array(5).fill(0).map(pr => ({
                id: Math.random() * Math.random() * 1000,
                start: "",
                end: "",
                agencyName: ""
            }))
    },
    methods: {
        onAddBarcodes() {
            const newBarcode = {
                id: Math.random() * Math.random() * 1000,
                start: "",
                end: "",
                agencyName: ""
            };
            this.barcodes.push(newBarcode);
        },
        onDeleteBarcodes(id) {
            this.barcodes = this.barcodes.filter(barcode => barcode.id !== id);
        },
    }
 }

【讨论】：