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

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

这是由于您正在动态创建列表而导致反应性问题。你必须基本上发起total: 0并且它完全正常。

Answer 2

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

V模型没有按预期绑定

2 个答案: