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

这是我第一次使用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”以引用

条目[0]。productId

和“productId2”以引用

条目[1]。productId

，等等。我的代码如下所示：

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>

...
X
...

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;
        }
    }
})

var-app=新的Vue({
el:“#应用程序”，
数据：{
数量：1，
参赛作品：[
{
产品ID:“”，
说明：“，
数量：“，
价格：“，
}
]
},
方法：{
附录：函数（）{
如果（该数值小于12）
此值为0.numEntries+=1；
},
removeEntry:函数（）{
如果（this.numEntries>1）
这个数值-=1；
}
}
})

此外，单击行上的

X

时，如何确定要删除的行？目前我的

removentry

功能非常简单

任何帮助都将不胜感激。

不要使用v-for=“n in numEntries”而是将其用作v-for=“entry in entries”。

---

这样，“entry”将是该div中的作用域对象。您可以使用v-model=“entry.productId”

您可以使用

v-for=“（entry，index）in entries”

循环通过

条目

，并且您可以使用

v-model=“entry.productId”

等等

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

...
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)
}