Vue.js - 动态生成 v-model 名称

Question

this is my first use of Vue.js so please bear with me. I have a section in my app where users can dynamically add (up to 5) entries and also remove entries. Each entry consists of four input tags that correspond to product id, description, quantity, and unit price. There is also an "X" icon at the end so that users can choose whether or not to remove that entry row before saving it. So visually, it would look something like this:

• 1 Tomatoes 40 $2.50 X
• 2 Pears 50 $1.39 X
• 3 Celery 12 $1.60 X

I am unsure how to dynamically generate v-model names that correspond to each piece of data that I want to save. In other words, I need four input tags and the X icon for each entry that a user wants to enter. Therefore, I'd want the Vue.js state to look something like:

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

And I would like the v-model to be something like "productId1" to refer to entries[0].productId and "productId2" to refer to entries[1].productId , etc. My code is shown below:

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

In addition, when clicking the X on a row, how do I determine which row to remove? Currently my removeEntry function is very bare bones.

Any help would be greatly appreciated.

Answer 1

Instead of using v-for="n in numEntries" use it as v-for="entry in entries". in this way, "entry" will be your scoped object in that div. and you can use v-model="entry.productId"

Answer 2

Vue loop code:

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

And remove item from array

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

Answer 3

you can loop through entries using v-for="(entry, index) in entries" and you can use v-model="entry.productId" and so on

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