Javascript 在动态阵列中更新唯一的Vue模型

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

为什么不直接做

---

这应该就够了。

当你提交什么时？我没有看到提交按钮，更不用说表单了。对不起。我认为没有必要填写完整的表格。所以，我使用Laravel到后端，当我发送在按下“生成产品”后生成的数据时，我在ProductQty中所做的更改没有任何效果。换句话说，仍然显示数量：40。

<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'}
        ];
    }
}
});