vue js inside v-for pass data to modal component

for passing Parent pass data to child, child component shoud set props and binding name 

Parents html

if (selectedId == i) is not exist, when click button, all modal will be open

 <tr v-for="(item, i) in adList">
     <td>{{ item.id }}</td>
     <td>{{ item.adName }}</td>
     <td><button type="button" class="btn btn-primary" @click="createAdParameterModal(item, i)">파라미터확인</button>
         <modal-ad-param-info v-if="selectedId == i && showAdParameterModal" :item="item" v-on:close="closeAdParameterModal"></modal-ad-param-info>
     </td>
</tr>

Method

        createAdParameterModal : function(index) {
            this.selectedId = index;
            this.showAdParameterModal = true;
        },

 

Modal(modal-ad-param-info) props : item (in html code binding name)

let createAdParameterModalTpml = `
    <div class="modal_wrapper requestRanking">
       <div class="modal_body">
            <div class="modal_contents">
                <div>
                    <span v-for="datasource in item.dataSourceNames">{{ datasource }}<br></span>
                </div>
                <button class="btn btn-outline-danger" @click="closeModal">닫기</button>
            </div>
       </div>
    </div>
`;

export default {
    template: createAdParameterModalTpml,
    props: ['item'],
    methods: {
        closeModal: function () {
            this.$emit('close');
        }
    }
};

vue.js(vuejs) v-for안에서 modal창 띄우다가....삽질을 너무 마니해서 기록해본다.