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

【问题标题】：Vue.js How to bind an element of the data array to a child components property?Vue.js 如何将数据数组的元素绑定到子组件属性？
【发布时间】：2016-11-19 04:07:19
【问题描述】：

我正在使用 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 只将 row 传递给模板函数。然后如何绑定到父数据 array 中的正确元素？

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

【问题讨论】：

您可以使用 vm.$set 或 Vue.set 来设置特定的元素。您需要确定要设置的元素

标签： vue.js

【解决方案1】：

我找到了一种可能的解决方案：当您将对象向下传递给子组件时，它会通过引用传递。这意味着当子组件更新此对象的属性时，更改会立即在父数据中可见。

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

【讨论】：