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

Question

我有一组在循环中无限次生成的字段。基本上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？

Answer 1

您可以在安装前在中调用onAddBarcodesn次：

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

Answer 2

您可以在这里添加挂载的钩子并使用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);
        },
    }
 }

Answer 3

您可以向created（）vue实例上的barcode添加5项，如下所示：

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