Vue.js How to bind an element of the data array to a child components property?

Question

I am using vue-tables to show some tabular data. I am trying to extend vue-tables to make cells in certain columns editable. Therefore I created a vuejs child component called "editable-cell" which is able to edit cell content. This child component is inserted as a vue-tables template for the editable column.

These are my vue-tables options:

       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>'
          },

Currently I am only passing the plain string value of row.title down to the child component.

My problem: When that is updated, then the data in the parent component is not changed. I know about two-way binding of properties with :value.sync="..." but how do I do that when I want to bind to the right element in parent data?

vue-tables only passes the row to the template function. How do I then bind to the correct element in the parent data array?

UPDATE I managed to create a JSFiddle that shows my problem: https://jsfiddle.net/Doogie/nvmt0vd7/

You can use vm.$set or Vue.set to set specific elements. You would need to determine the element to set though — vbranden

Robert Robert · Accepted Answer · 2016-07-25T20:26:41

I found one possible solution: When you pass an object down to the child component, then it is passed by-reference. That means when the child component updates the properties of this object, then the changes are immideately visible in the parants data.

So I simply pass down the whole row to each editable-cell. Then it can update its property/value in that row.

Vue.js How to bind an element of the data array to a child components property?

1 Answers