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个。

如果需要更多，添加更多按钮将向前添加第六个。如果他们愿意的话，“删除”按钮应将其删除数量减少到零（并非如此），但绝对应该至少删除1个。

如何以特定的迭代次数开始v-for？

Answer 1

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

created() {
    [...Array(5).keys()].forEach(() => 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

您可以在onAddBarcodes中呼叫beforeMount n次：

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

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

3 个答案: