Vue.js如何將數據數組的元素綁定到子組件屬性？

我正在使用vue-tables來顯示一些表格數據。我正在嘗試擴展vue-tables以使某些列中的單元格可編輯。因此我創建了一個名爲「editable-cell」的vuejs子組件，它可以編輯單元格內容。此子組件作爲可編輯列的vue-tables模板插入。Vue.js如何將數據數組的元素綁定到子組件屬性？

這是我的VUE桌選項：

 headings: { 
      title: 'Title', 
      description: 'Description', 
      createdBy: 'Created By', 
      createdAt: 'Created At', 
      updatedAt: 'Updated At', 
     }, 
     compileTemplates: true, // compile vue.js logic on templates. 
     templates: { 
      title: function(row) { 
      return '<editable-cell row-id="'+row._id.$oid+'" key="title" value="'+row.title+'"></editable-cell>' 
      },

目前我只允許通過row.title普通字符串值下降到子組件。

我的問題：當更新時，父組件中的數據不會更改。我知道與:value.sync="..."屬性的雙向綁定，但我如何做到這一點，當我想綁定到父數據中的正確元素？

vue-tables僅將行傳遞給模板函數。然後，我如何綁定到父數據中的正確元素array？

UPDATE我設法創建的jsfiddle，顯示我的問題： https://jsfiddle.net/Doogie/nvmt0vd7/

來源

2016-07-15 Robert

您可以使用vm。$ set或Vue.set來設置特定的元素。您需要確定要設置的元素 – vbranden

我發現了一個可能的解決方案：當你傳遞一個對象下到子組件，那麼它會被引用過。這意味着當子組件更新此對象的屬性時，這些更改會在Parants數據中立即可見。

所以我只是將整行傳遞給每個可編輯單元格。然後它可以更新該行中的屬性/值。

來源

2016-07-25 20:26:41 Robert

Vue.js如何將數據數組的元素綁定到子組件屬性？

回答

相關問題