VueJs의 구성 요소에 개체 또는 개체 키 전달

VueJs의 구성 요소에 개체 또는 개체 키 전달

VueJs에서 전송되는 객체 배열에 연결된 인사 테이블이 있습니다.테이블의 마지막 열은 각 레코드를 편집하기 위한 버튼입니다.

편집 버튼을 클릭하면 모달 팝업을 표시하고 텍스트 상자를 편집하려는 직원의 속성에 바인딩합니다.모달 팝업의 저장 버튼을 클릭하면 테이블과 데이터 소스가 업데이트됩니다.

그러나 데이터를 로드하거나 편집된 개체를 텍스트 상자에 바인딩할 수 있도록 오브젝트 또는 키만 컴포넌트에 전달해야 합니다.

JS

var app = new Vue({
  el: '#my-app',
  data: {
    personnels: [
      {
        id: 1,
        firstName: 'Billy',
        lastName: 'Bob',
        email: 'bb@kewl.com'
      },
      {
        id: 2,
        firstName: 'Mike',
        lastName: 'Coilers',
        email: 'mco@kewl.com'
      },
      {
        id: 3,
        firstName: 'Fred',
        lastName: 'Just',
        email: 'freju@gmail.com'
      },
      {
        id: 4,
        firstName: 'Tori',
        lastName: 'Drury',
        email: 'smstua@gmail.com'
      }
    ]
  },
  methods: {
    showPersonnelEditor: function () {
      // how do i pass data to the personnelEditor component?
    }
  }
});

Vue.component('personnel-editor', {
  prop: ['personnel']
});

HTML

<div id="my-app">
    <table classs="table" width="100%">
        <tr>
            <th>
                Id
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                Actions
            </th>
        </tr>
        <tr v-for="personnel in personnels">
            <td>
                {{ personnel.id }}
            </td>
            <td>
                {{ personnel.firstName }}
            </td>
            <td>
                {{ personnel.lastName }}
            </td>
            <td>
                {{ personnel.email }}
            </td>
            <td>
                <button v-on:click="showPersonnelEditor">Edit</button>
            </td>
        </tr>
    </table>


    <personnel-editor inline-template><div class="modal fade" >
        <div class="modal-dialog">
            <div class="modal-header">
                header
            </div>
            <div class="modal-content">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Id</label>
                        <input type="text" v-model="personnel.Id" />
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12">
                            <label>First Name</label>
                            <input type="text" v-model="personnel.firstName" />
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Last Name</label>
                        <input type="text" v-model="personnel.lastName" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Email</label>
                        <input type="text" v-model="personnel.Email" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                oh mah foot
            </div>
        </div>
    </div>
</div></personnel-editor>

다음 작업을 수행할 수 있습니다.

<button v-on:click="showPersonnelEditor(personnel)">Edit</button>

다음으로 show Personnel Editor 메서드:

showPersonnelEditor: function (personnel) {
  this.selectedPersonnel = personnel; //make sure to declare selectedPersonnel in data
}

마지막으로 html 템플릿에서 다음을 수행합니다.

<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >

도움이 되네.

모달 결과를 바인딩하기 위한 편집:

모달 닫힘 시 구현에 따라 버튼 또는 기타 닫힘 이벤트를 사용하여 이벤트를 내보낼 수 있습니다.이벤트 발생 시 출력하기 위한 코드샘플을 다음에 나타냅니다.

        whenModalClosedMethod() {
            this.$emit('personnel-edited', personnel);
        }

그런 다음 템플릿에서 다음을 수행합니다.

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

다음으로 루트 컴포넌트에 메서드를 추가합니다.

updatePersonnel: function(personnel) {
   //look for the correct entry by id in your personnels array and update it
}

언급URL : https://stackoverflow.com/questions/45975937/passing-an-object-or-object-key-to-a-component-in-vuejs