получить и установить реактивное значение в поле ввода v-for

Question

У меня есть v-for l oop, который перебирает свойства объекта, затем отображает ключ, значение и индекс свойств, некоторые из которых используются в поле ввода. Объект заполняется динамически, когда пользователь нажимает кнопку. Однако я не могу получить значение в поле ввода для обновления значения свойства в объекте экземпляра vue, который заполняется динамически, с помощью директивы v-model. Как получить значение поля ввода для обновления экземпляра vue?

            <ul>
                <li v-for="(item, key, index) in itemsObj" v-if="item > 0">
                    {{ index }} - {{ key }} - <input type="number" v-model="item" min="1" max="5"> 
                    <div id="deleteItemID">
                        <button name="deleteItem" @click="deleteItem()" v-bind:value= key>X</button>
                    </div>
                </li>   
            </ul>
<button type="button" name="addToCart" @click="addToCart" id="prod" value="1">Add to Cart</button>

Затем в экземпляре Vue

let shoppingCart = new Vue({
            el : '#shoppingApp',
            data : {
                totalItems : 0,
                itemsObj : {}
            }, 
            methods : {
                addToCart : function(){
                    let prodName = event.target.id;
                    let numberOfItems = parseInt(document.getElementById("prod").value);
                    this.updateItemsObj(this.itemsObj, prodName, numberOfItems);
                    this.$forceUpdate();
                },
              deleteItem : function(){
                    let x = event.target.value;
                    console.log(x);
                    this.updateItemsObj(this.itemsObj, x, 0);
                }
           }
})
enter code here

Answer 1

Попробуйте получить доступ к item, используя key:

{{ index }} - {{ key }} - <input type="number" v-model="itemsObj[key]" min="1" max="5"> 

Также помните, что при динамическом добавлении свойств вы должны использовать Vue.set

Answer 2

Вы можете обработать событие input в элементе ввода и передать ключ обработчику

<input type="number" :value="item" @input="onChange($event, key)" min="1" max="5"> 

, а в обработчике вы можете выполнять обновления

onChange(event, key) {
  this.itemsObj[key] = event.target.value;
}