Question

这是我第一次使用Vue.js，所以请多多包涵。我的应用程序中有一个部分，用户可以在其中动态添加（最多5个）条目，也可以删除条目。每个条目由四个输入标签组成，分别对应于产品ID，描述，数量和单价。末尾还有一个“ X”图标，以便用户可以选择是否在保存之前删除该输入行。因此，从视觉上看，它看起来像这样：

1个西红柿40 2.50美元X
2个梨50 $ 1.39 X
3芹菜12 $ 1.60 X

我不确定如何动态生成与我要保存的每个数据相对应的v-model名称。换句话说，对于用户要输入的每个条目，我需要四个输入标签和X图标。因此，我希望Vue.js状态看起来像：

    data: {
        numEntries: 2,
        entries: [
            {
                productId: "",
                description: "",
                qty: "",
                price: "",
            },
            {
                productId: "",
                description: "",
                qty: "",
                price: "",
            },
            // There will be 'n' of these objects depending on how many entries there are.
        ]
    }

我希望v-model类似于“ productId1”来引用entries[0].productId，而“ productId2”可以对entries[1].productId等等，等等。我的代码如下所示：< / p>

HTML

<div id="app">
    ...
    <div v-for="n in numEntries" class="inventory-section">
        <input type="text" class="id-input" placeholder="Product Id" v-model="productId" />
        <input type="text" class="description-input" placeholder="Description" v-model="description" />
        <input type="text" class="qty-input" placeholder="Qty" v-model="qty" />
        <input type="text" class="price-input" placeholder="Price" v-model="price" />
        <span class="x-sign" v-on:click="removeEntry">X</span>
    </div>
    ...
</div>

Vue JS

var app = new Vue({
    el: '#app',
    data: {
        numEntries: 1,
        entries: [
            {
                productId: "",
                description: "",
                qty: "",
                price: "",
            }
        ]
    },
    methods: {
        addEntry: function () {
            if (this.numEntries < 12)
                this.numEntries += 1;
        },
        removeEntry: function () {
            if (this.numEntries > 1)
                this.numEntries -= 1;
        }
    }
})

此外，当单击行上的X时，如何确定要删除的行？目前，我的removeEntry功能非常简单。

任何帮助将不胜感激。

Answer 1

与其使用v-for =“ n in numEntries”，不如将其用作v-for =“ entryents in entry”。这样，“ entry”将成为该div中的作用域对象。您可以使用v-model =“ entry.productId”

Answer 2

Vue循环代码：

<div v-for="(itm,ind) in entries" class="inventory-section">
    <input type="text" class="id-input" placeholder="Product Id" v-model="itm.productId" />
    <input type="text" class="description-input" placeholder="Description" v-model="itm.description" />
    <input type="text" class="qty-input" placeholder="Qty" v-model="itm.qty" />
    <input type="text" class="price-input" placeholder="Price" v-model="itm.price" />
    <span class="x-sign" @click="removeEntry(ind)">X</span>
    </div>

并从数组中删除项目

removeEntry: function (i) {
this.entries.splice(i,1)
}

Answer 3

您可以使用! Copyright (c) 2004-2006 The Trustees of Indiana University and Indiana ! University Research and Technology ! Corporation. All rights reserved. ! Copyright (c) 2004-2005 The Regents of the University of California. ! All rights reserved. ! Copyright (c) 2006-2015 Cisco Systems, Inc. All rights reserved. ! $COPYRIGHT$ ! ! Sample MPI "hello world" application using the Fortran mpi module ! bindings. program main use mpi implicit none integer :: ierr, rank, size, len character(len=MPI_MAX_LIBRARY_VERSION_STRING) :: version call MPI_INIT(ierr) call MPI_COMM_RANK(MPI_COMM_WORLD, rank, ierr) call MPI_COMM_SIZE(MPI_COMM_WORLD, size, ierr) call MPI_GET_LIBRARY_VERSION(version, len, ierr) write(*, '("Hello, world, I am ", i2, " of ", i2, ": ", a)') & rank, size, version call MPI_FINALIZE(ierr) end遍历entries，也可以使用v-for="(entry, index) in entries"，依此类推

v-model="entry.productId"

Vue.js-动态生成v模型名称

3 个答案: