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

Posted 2023-02-22

【中文标题】如何在 VueJS 的 v-for 循环中定义起点

【英文标题】：How to define a starting point in a v-for loop in VueJS

【发布时间】：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？

【参考方案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);
        ,