更新动态数组中的唯一Vue模型

Question

如何生成列表，编辑一些数据，然后将其推送到数据库？当我点击“提交”时，所做的更改无效。

Example:

<div id="demo">
<button v-on="click: generateProducts">Generate products</button>
<table border='1px'>
    <thead>
        <tr>
            <td>Product name</td>
            <td>Quantity</td>
        </tr>
    </thead>
    <tbody>
        <tr v-repeat="product in products">
            <td>{{ product.name }}</td>
            <td>
                <input name="productQty[]" type="text" value="{{ product.qty }}">
            </td>
        </tr>
    </tbody>
</table>

new Vue({

el: '#demo',

data: {
    products: []
},

methods: {
    generateProducts: function() {
        console.log('works');
        var self = this;

        self.products = [
            {name: 'Black Box', qty: '40'},
            {name: 'Blue Box', qty: '40'},
            {name: 'Orange Box', qty: '40'}
        ];
    }
}
});

Answer 1

为什么不做<input v-model="product.qty" type="text" />

那应该是诡计。