2015-09-09 31 views
2

如何生成列表,編輯一些數據並將其推送到數據庫?當我點擊「提交」時,所做的更改不起作用。更新動態數組中的唯一Vue模型

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

當你提交什麼?我沒有看到提交按鈕,更不用說任何形式的表單。 –

+0

對不起。我認爲完整的表格並非必要。所以,我使用Laravel後端,當我發送按下「生成產品」後生成的數據時,我在ProductQty中所做的更改不起作用。換句話說,仍然顯示數量:40。 –

回答

0

爲什麼不只是做<input v-model="product.qty" type="text" />

這應該做的伎倆。