Vue.js 데이터 배열의 요소를 하위 구성 요소 속성에 바인딩하는 방법은 무엇입니까?

Question

일부 표 데이터를 표시하기 위해 vue-tables를 사용하고 있습니다. 특정 열의 셀을 편집 가능하게 만들기 위해 vue 테이블을 확장하려고합니다. 그래서 나는 셀 내용을 편집 할 수있는 "editable-cell"이라는 vuejs 하위 구성 요소를 만들었습니다. 이 하위 구성 요소는 편집 가능한 열에 대한 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의 일반 문자열 값을 전달하고있다 :

이

내 VUE 테이블의 옵션입니다.

내 문제 : 업데이트되면 상위 구성 요소의 데이터가 변경되지 않습니다. :value.sync="..." 속성의 양방향 바인딩에 대해 알고 있지만 부모 데이터의 올바른 요소에 바인딩하려는 경우 어떻게해야합니까?

vue-tables는 행 만 템플릿 기능으로 전달합니다. 그런 다음 상위 데이터의 올바른 요소에 바인딩하는 방법 배열? https://jsfiddle.net/Doogie/nvmt0vd7/

Answer 1

내가 하나의 가능한 해결책을 발견 :

UPDATE 나는 내 문제를 보여줍니다 JSFiddle 만들 관리 당신이 아이 컴퍼넌트까지 객체를 전달하면 을, 다음은 참조에 의한 전달됩니다. 즉, 하위 구성 요소가이 개체의 속성을 업데이트하면 변경 내용이 하위 데이터에 표시됩니다.

그래서 전체 행을 각 편집 가능한 셀로 전달합니다. 그런 다음 해당 행의 속성/값을 업데이트 할 수 있습니다.