Javascript V-model未按预期绑定

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

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

console.log（）向我显示了正确的值，但绑定到total的单元格从不更新

我应该指出，quantity键和total键都是通过v-model添加到product对象的

我哪里做错了

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

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

固定的：

---

这是由于您完全动态地创建列表，并导致了反应性问题。您必须基本上启动

total:0

，它工作得非常好。

您可以通过向产品添加

total

属性来修复它。它可能是

0

，甚至可能是

未定义的

，但它必须存在。这是设计的。github上的相关问题：和。

请创建JSFIDLE或类似文件。我们将帮助OK现在就做一个。这是我的发行量演示：data.products.forEach（cat=>{cat.productList.forEach（product=>{product.total=undefined；}）this.products=data.products；}）好的，所以它在jsbin中工作，但在我的应用程序中不工作。你能在我上面的代码中发现一些可能错误的地方吗？this.products.push（{id:1，name:'foo'，total:0}）；是的，我在真实应用程序的模式下添加了这一点，但不起作用。我将用这段代码编辑我的问题。有趣的是，你说必须先声明它。我的qty键没有首先声明，但它仍然有效。@usedToBeFat好的，我对它进行了更多的实验，发现未初始化属性的绑定只有一种方式有效——当您输入值时。这就是为什么它适用于

数量

，也适用于

总量

。但是，当属性在开始时不存在时，输出的绑定会中断。您可以尝试在文本中显示

{{p.qty}

（例如，在输入旁边），即使输入的值传递到模型，您也看不到任何内容。这很有意义，并且与我修复它的方式完全一致。

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