在 v-for 输入字段中获取和设置反应值

Question

我有一个 v-for 循环，循环遍历对象的属性，然后呈现属性的键、值和索引，其中一些在输入字段中使用。当用户单击按钮时，该对象会动态填充。但是，我无法通过使用 v-model 指令获取输入字段中的值来更新动态填充的 vue 实例对象中属性的值。如何获取输入字段的值以更新 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

尝试使用 key 访问 item:

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

在 v-for 输入字段中获取和设置反应值

get and set reactive value within a v-for input field

html

javascript

vue.js

v-model