반응형
루프 내에서 Vuejs 구성 요소의 가변 매개 변수 액세스
부에즈는 처음이야.나는 삭제 확인 모달에 대한 vuejs 구성 요소를 작성했다.나는 이것을 레코드 목록이라고 부른다. 여기 내 코드가 있다.
<template id="bs-modal">
<div class="modal fade" id="confirmDeleteModal" tabindex="-1"
role="dialog" aria-labelledby="confirmDeleteModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"
id="confirmDeleteModalLabel">
Delete {{ item | capitalize }}
</h4>
</div>
<div class="modal-body">
Are you sure about deleting the {{ name }} {{ item }} ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary"
v-on:click="deleteItem(id)">Yes</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: ['item', 'name', 'id'],
methods: {
deleteItem : function(id) {
var url = window.location.href;
var baseUrl = url.substring(0,
url.indexOf('/', url.indexOf('://') + 3) + 1);
var adminPosition = url.indexOf('admin/') + 6;
var entity = url.substring(adminPosition,
url.indexOf('/', adminPosition));
this.$http.delete(baseUrl + "admin/" + entity + "/" + id).then((response) => {
if (response.body.status_code == '200') {
// Calling just modal('hide') does not hide the backdrop
// There should be a better solution for this
$("#confirmDeleteModal").modal("hide");
$("#confirmDeleteModal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");
$("tr[data-id=" + id + "]").remove();
// Display success message
}
});
}
},
filters: {
capitalize: function (value) {
if (!value) {
return '';
}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
}
</script>
그리고 여기 이 구성 요소를 라벨 5.3이라고 부르는 제 블레이드 템플릿이 있습니다,
@foreach ($categories as $category)
<tr data-id="{{ $category->id }}">
<td>{{ $category->id }}</td>
<td>{{ $category->name }}</td>
<td id="actions">
<a href="{{ url('admin/category/' . $category->id . '/get') }}">Show</a>
<a href="{{ url('admin/category/' . $category->id . '/edit') }}">Edit</a>
<a href="#" data-toggle="modal" data-target="#confirmDeleteModal">Delete</a>
<confirm-delete-modal item="category" id="{{ $category->id }}" name="{{ $category->name }}"></confirm-delete-modal>
</td>
</tr>
@endforeach
내가 구성요소에 전달하는 매개변수는 가변적이며 Vue devtools에 따르면 구성요소는 각 레코드에 대해 정확한 값을 얻지만 코드를 실행하면 항상 목록의 첫 레코드 매개변수를 얻는다.
내가 뭘 빼놓았나요?
주요 이슈는 모든 구성요소에 대해 동일한 ID에서 발생했으며, ID가 있는 첫 번째 요소 링크(DeleteModal 확인)를 클릭하면 오픈될 것이라고 생각한다.
다음과 같은 각 구성 요소에 대해 고유 ID를 설정할 수 있다.
<div class="modal fade" :id="'confirmDeleteModal_'+id" tabindex="-1"
role="dialog" aria-labelledby="confirmDeleteModalLabel">
변수를 소품으로 전달할 때는 다음과 같이 v-bind를 사용해야 한다."
<confirm-delete-modal item="category" v-bind:id="{{ $category->id }}" v-bind:name="{{ $category->name }}"></confirm-delete-modal>
아니면 간단히 말해서 당신은 교체할 수 있다.v-bind와 함께:다음과 같이.
<confirm-delete-modal item="category" :id="{{ $category->id }}" :name="{{ $category->name }}"></confirm-delete-modal>
나는 각 레코드에 대해 확인 삭제 모달로 전화하는 것은 잘못된 방법이라고 생각한다.나는 루프 바깥으로 모달(모달)을 옮기고 문제를 해결하기 위해 코드를 몇 가지 변경했다.
다음은 confirmDelete의 코드 입니다.vue :
<template id="modal-template">
<transition name="confirm-delete-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
Are you sure about deleting the {{ this.$parent.item_name }} {{ item }} ?
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" @click="deleteItem();">
Yes
</button>
<button class="modal-default-button" @click="$emit('close')">
No
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data () {
return {
}
},
props: ['item'],
methods: {
deleteItem : function() {
var url = window.location.href;
var baseUrl = url.substring(0, url.indexOf('/', url.indexOf('://') + 3) + 1);
var adminPosition = url.indexOf('admin/') + 6;
var entity = url.substring(adminPosition, url.indexOf('/', adminPosition));
this.$http.delete(baseUrl + "admin/" + entity + "/" + this.$parent.item_id).then((response) => {
if (response.body.status_code == '200') {
$("tr[data-id=" + this.$parent.item_id + "]").remove();
this.$emit('close');
// Display success message
}
});
}
},
filters: {
capitalize: function (value) {
if (!value) {
return '';
}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
}
</script>그리고 여기 블레이드 템플릿:
@foreach ($categories as $category)
<tr data-id="{{ $category->id }}">
<td>{{ $category->id }}</td>
<td>{{ $category->name }}</td>
<td id="actions">
<a href="{{ url('admin/category/' . $category->id . '/get') }}">Show</a>
<a href="{{ url('admin/category/' . $category->id . '/edit') }}">Edit</a>
<a href="#" id="{{ $category->name }}_{{ $category->id }}" @click="setDeleteModal($event)">Delete</a>
</td>
</tr>
@endforeach
<confirm-delete-modal item="category"
v-if="showDeleteModal"
@close="closeDeleteModal">
<h3 slot="header">Delete Category</h3>
</confirm-delete-modal>마지막으로 상위 vue 인스턴스의 코드:
new Vue({
el: '#crud',
data: {
showDeleteModal: false,
item_id: '',
item_name: ''
},
methods: {
setDeleteModal: function(e) {
this.showDeleteModal = true;
params = e.target.id.split("_");
this.item_id = params[1];
this.item_name = params[0];
},
closeDeleteModal: function() {
this.showDeleteModal = false;
}
}
});나는 이것이 다른 누군가에게 도움이 되었으면 좋겠어.
나는 부에즈 전문가들의 아이디어를 알면 기쁠 것이다.
반응형
'IT이야기' 카테고리의 다른 글
| Vuex가 돌연변이를 인식하지 못함 (0) | 2022.04.10 |
|---|---|
| Vue JS에서 로그인 API 토큰 처리 (0) | 2022.04.10 |
| 반응JS - 요소의 높이 가져오기 (0) | 2022.04.09 |
| vue.js 애플리케이션의 상태 업데이트에 사용할 항목(rxJs 대 Vuex) (0) | 2022.04.09 |
| Python에서 대용량 파일의 라인 수를 저렴하게 얻는 방법 (0) | 2022.04.09 |