반응형
v-for prop 값이 부트스트랩 모달로 업데이트되지 않음
다음과 같은 코드 조각이 있습니다.
<div class="list-group-item media" v-for="evt in event">
<eventmodal :currentevent = "evt"></eventmodal>
</div>
제가 직면한 문제는 소품에서 항상 첫 번째 가치를 얻고 있다는 것입니다.제가 여기서 뭘 잘못하고 있는지 알려주실 수 있나요?vuejs 2.0을 사용하고 있다
또, 자 컴포넌트의 소품을 프로그래밍 방식으로 설정할 수 있습니까?
내 자식 구성요소는 다음과 같습니다.
<template>
<div class="card content">
<h4 class="modal-title">
<span v-if="currentevent">{{currentevent.title}}</span>
<span v-else>New Event</span>
</h4>
<div class="form-group">
<input type="text" placeholder="enter event title here" class="form-control" v-model="title">
<i class="form-group__bar"></i>
</div>
<textarea class="note-view__body" id="eventDescription" v-model="description" placeholder="enter event description"></textarea>
<div class="form-group">
<input type="text" placeholder="enter organizer name here" class="form-control" v-model="organizer">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="start date" class="form-control" v-model="startdate">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="end date" class="form-control" v-model="enddate">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="email" class="form-control" v-model="email">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="phone" class="form-control" v-model="phone">
<i class="form-group__bar"></i>
</div>
<div class="card-footer">
<button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" v-on:click="performSave()" class="btn btn-link">Save</button>
</div>
</div>
</template>
<script>
export default {
props:['currentevent'],
data() {
return {
title: '',
description: '',
organizer: '',
startdate: '',
enddate: '',
email: '',
phone: ''
}
},
mounted() {
this.makeTextBoxReady();
},
methods: {
makeTextBoxReady: function() {
$(document).ready(function() {
if (!$('html').is('.ie9')) {
if ($('.note-view__body')[0]) {
$('.note-view__body').trumbowyg({
autogrow: true,
btns: [
'btnGrp-semantic', ['formatting'],
'btnGrp-justify',
'btnGrp-lists', ['removeformat']
]
});
}
}
});
},
performSave : function() {
let description = $('#eventDescription').trumbowyg('html');
let formData = new FormData();
formData.append('title',this.title);
formData.append('desciption',description);
formData.append('startdate',this.startdate);
formData.append('enddate',this.enddate);
formData.append('organizer',this.organizer);
formData.append('email',this.email);
formData.append('phone',this.phone);
// formData.append('X-CSRF-TOKEN',document.querySelector('#_token').getAttribute('content'));
console.log("going to save event information");
this.$http.post('/admin/event/create', formData).then(response => {
console.log(response);
if(response.data.status==200) {
alert(response.data.message);
this.$emit('get_events');
}
})
},
clear: function() {
this.title = '';
this.description = '';
this.organizer = '';
this.startdate = '';
this.enddate = '';
this.email = '';
this.phone = '';
}
}
}
</script>
이벤트(반복 중)...
이벤트(애플리케이션의 컨텍스트)는 Google 이벤트와 마찬가지로 발생하는 것입니다.사용자는 이벤트를 만들고 해당 이벤트를 일정관리 컨트롤에 렌더링합니다.
현재 시스템에는 3개의 이벤트가 있습니다.모두 여기에 나열되어 있습니다.또한 v-for의 "이벤트"에 제대로 적재되어 있다는 사실도 보증할 수 있습니다.단지 프로포트의 가치가 항상 첫 번째입니다.VueJs 1.0에서는 동기화를 쉽게 할 수 있었고, 반복된 올바른 값과 프로펠러를 동기화할 수 있었습니다만, 이러한 프로펠러가 없어져 버린 것은 유감입니다.
[
{
"id": 2,
"title": "15-17",
"desciption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deserunt.",
"eventscategory_id": 1,
"startdate": "2016-10-11 03:09:15",
"enddate": "2016-10-17 19:12:15",
"organizer": "another user",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": null,
"email": "test123@test.com",
"fax": null,
"created_at": "2015-09-21 19:12:15",
"updated_at": "2016-12-11 10:51:53",
"deleted_at": null
},
{
"id": 19,
"title": "latest event",
"desciption": "",
"eventscategory_id": 1,
"startdate": "2017-01-01 00:00:00",
"enddate": "2017-01-03 00:00:00",
"organizer": "a user",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": "5197293401",
"email": "auser@gmail.com",
"fax": null,
"created_at": "2016-12-16 06:32:53",
"updated_at": "2016-12-16 06:32:53",
"deleted_at": null
},
{
"id": 23,
"title": "check for description",
"desciption": "",
"eventscategory_id": 1,
"startdate": "2017-10-10 00:00:00",
"enddate": "2017-10-10 00:00:00",
"organizer": "test organizer",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": "12345",
"email": "test@test.com",
"fax": null,
"created_at": "2016-12-16 06:43:04",
"updated_at": "2016-12-16 06:43:32",
"deleted_at": null
}
]
제가 여기서 뭘 잘못하고 있는지 알려주실 수 있나요?
<div class="list-group-item media" v-for="evt in event" :key="evt.id">
<eventmodal :currentevent="evt"></eventmodal>
</div>
성능 향상을 위해 v-for는 "inplace 패치" 전략을 사용하며 하위 구성 요소 상태 또는 임시 DOM 상태 변경 시 목록 렌더링이 변경되지 않습니다.이러한 변경 사항을 추적하려면 v-for를 사용하여 키 특성을 추가해야 합니다.
나는 공간이 단지 오타였으면 좋겠다.<eventmodal :currentevent = "evt"></eventmodal>, 스페이스 삭제:currentevent = "evt".
편집필
매번 같은 모달, 소품들은 올바르게 통과되고 있지만 매번 같은 모달들을 로드하고 있습니다.
<eventmodal :id="evt.id" :currentevent="evt"></eventmodal>
이것을 표시하는 경우는, 이 다이나믹 ID 를 다음과 같이 사용할 필요가 있습니다.
$("#" + event.id).modal()
언급URL : https://stackoverflow.com/questions/41191789/v-for-prop-value-not-getting-updated-with-bootstrap-modal
반응형
'itsource' 카테고리의 다른 글
| 16진수를 C로 표시하는 방법 (0) | 2022.07.17 |
|---|---|
| localDate to java.util.날짜 및 그 반대도 단순 변환입니까? (0) | 2022.07.17 |
| 농담으로 "이" 객체에 대한 메서드를 조롱하다 (0) | 2022.07.17 |
| 수집되지 않은 참조 오류: 버스가 정의되지 않았습니까?(v.1992) (0) | 2022.07.17 |
| 메인스트림 OS에서 프로그램의 C/C++ 최대 스택 크기 (0) | 2022.07.17 |