Question

我正在使用vue-tables来显示一些表格数据。我正在尝试扩展vue-tables以使某些列中的单元格可编辑。因此，我创建了一个名为“editable-cell”的vuejs子组件，它可以编辑单元格内容。此子组件作为可编辑列的vue-tables模板插入。

这些是我的vue-tables选项：

       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只将行传递给模板函数。然后，我如何绑定父数据数组中的正确元素？

UPDATE 我设法创建了一个显示我的问题的JSFiddle： https://jsfiddle.net/Doogie/nvmt0vd7/

Answer 1

我找到了一个可能的解决方案：将对象传递给子组件时，它将通过引用传递。这意味着当子组件更新此对象的属性时，更改将在parants数据中随处可见。

所以我只需将整行传递给每个可编辑单元格。然后它可以更新该行中的属性/值。

Vue.js如何将数据数组的元素绑定到子组件属性？

1 个答案: