V-model 没有按预期绑定

Question

我有一张表，它遍历产品列表。对于表中的每个产品，我都有一个输入，用户可以在其中选择他想要该行中产品的数量。然后我在表格中有另一个单元格，该单元格是根据用户数量乘以单价计算得出的。这是我的桌子。

         <table class="table table-striped table-borderd">
                <template v-for="(c, catIndex) in products">
                    <tr>
                        <th>{{c.category}}</th>
                        <th>{{c.bulkSize}}</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Total</th>
                    </tr>
                    <tr v-for="(p, productIndex) in c.productList">
                        <td>{{p.description}}</td>
                        <td>{{p.productSize}}</td>
                        <td>{{p.productPrice}}</td>
                        <td>
                            <input v-on:keyup='calculateTotal(catIndex, productIndex)' type="text" v-model="p.quantity" placeholder="Quantity">
                        </td>
                        <td>
                            <input 
                            type="text"
                            readonly 
                            v-model="p.total">
                        </td>
                    </tr>
                </template>
            </table>

然后在我的 JavaScript 中计算 keyup 的总数。这是代码。

calculateTotal: function(categoryIndex, productIndex) {
        let currentCategory = this.products[categoryIndex];
        let currentProduct = currentCategory.productList[productIndex];
        currentProduct.total = currentProduct.quantity * currentProduct.productPrice;
        console.log(this.products[categoryIndex].productList[productIndex].total);
    }

console.log() 向我显示了正确的值，但绑定到 total 的单元格永远不会更新。

我应该指出，数量键和总键都是通过 v-model 添加到产品对象中的。

我哪里出错了？

编辑： 根据下面的答案，我添加了这段代码来尝试解决这个问题，但它没有用。

created: function() {
    $.get('some endpoint', data => {
        this.customers = data.customers;
        this.locations = data.locations;
        this.products = data.products;
        this.products.forEach(cat => {
            cat.productList.forEach(product => {
                product.total = undefined;
            })
        })
    });
},

Answer 1

您可以通过将total 属性添加到您的产品来修复它。它可能是0 甚至是undefined，但是，它必须在那里。这是设计使然。 github上的相关问题：https://github.com/vuejs/vue/issues/1797和https://github.com/vuejs/vue/issues/3732。

Answer 2

固定：http://jsbin.com/nilutegexo/1/edit?html,js,console,output

这是因为您完全动态地创建列表，并且导致反应性问题。你基本上必须启动total: 0，它工作得很好。