반응형
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창 띄우다가....삽질을 너무 마니해서 기록해본다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
[ JavaScript ] 자바스크립트 객체 복사할 때 주의사항 (0) | 2020.12.02 |
---|---|
[ 자바스크립트 ] javascript date.getMonth() bug? 한 달전 달이 출력되는 이슈? (0) | 2020.09.25 |
[ Javascript ] 자바스크립트 ajax 크로스도메인 이슈(CORS) (0) | 2018.07.26 |
[ jQquery ] jQuery플러그인으로 쿠키 다루기 (0) | 2018.07.23 |
[JavaScript] 자바스크립트 이것만은 알고가자 Part.3 (0) | 2017.07.22 |