반응형
v-for - VUE에서 어레이 항목을 제거하려면 인덱스를 하위 구성 요소에서 상위 구성 요소로 보냅니다.JS 2
저는 Vue JS를 처음 사용하는 사람이라 Vue 2부터 시작했습니다.
어레이 항목을 제거해야 하지만 해당 메서드를 트리거하는 버튼은 템플릿 안에 있고 v-for는 상위 템플릿 안에 있습니다.
이것은 나의 HTML 입니다.
주된
<div id="main">
<div class="panel-group" id="panelGrp">
<div class="row panelTopSpacing" v-for="panel in panels" is="panel-row" :panel.sync="panel" :general-fields="generalFields" :assistants="assistants" :companies="companies" :positions="positions"></div>
</div>
</div>
어린아이
//CHILD TEMPLATE
<template id="panelsTpl">
<div class="panel panel-success">
<div class="panel-heading">
{{panel.title}}
<a :class="panel.classObj.link" role="button" data-toggle="collapse" data-parent="#panelGrp" :href.sync="'#'+panel.id"></a>
<i :class="panel.infoIcon"></i>
</div>
<div :id.sync="panel.id" :class="panel.classObj.panel">
<div class="panel-body">
<div class="container-fluid" v-if="panel.id === 'genInfo'">
<div class="row">
<div v-for="genField in generalFields" is="general-field" :gen-field.sync="genField"></div>
</div>
</div>
<div class="container-fluid" v-else-if="panel.id === 'assistants'">
<div class="row">
<table class="table table-striped table-responsive table-hover">
<tr>
<th>Internal?</th>
<th>Can read?</th>
<th>Position</th>
<th>Name</th>
<th>Company</th>
<th width="50px"> </th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="checkbox" ></td>
<td></td>
<td><input type="text" class="form-control"></td>
<td></td>
<td><a href="#" @click="addAssistant()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></td>
</tr>
<tr v-for="(assistnt,index) in assistants" is="assistant-row" :assistant.sync="assistnt"></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
자녀 템플릿의 자녀
<template id="asstntsTpl">
<tr v-if="! editing">
<td>{{ assistant.internal }}</td>
<td>{{ assistant.allowRead }}</td>
<td>{{ assistant.positionId | position }}</td>
<td>{{ assistant.name }}</td>
<td>{{ assistant.cmpnyId | company }}</td>
<td>
<a href="#" @click="edit()"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<a href="#" @click="remove(index)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>
</tr>
<tr v-else>
<td><input type="checkbox" v-model="assistant.internal"></td>
<td><input type="checkbox" v-model="assistant.allowRead"></td>
<td><!--<select-position :position="positions" :id.sync="assistant.positionId"></select-position>--></td>
<td><input type="text" v-model="assistant.name" class="form-control"></td>
<td><!--<select-company :company="companies" :id.sync="assistant.cmpnyId"></select-company>--></td>
<td><a href="#" @click="update()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a></td>
</tr>
</template>
JS:
var main = new Vue({
el: "#main",
data: {
valid: false,
new_assistant: {
id: "",
name: "",
internal: true,
cmpnyId: "",
positionId: "",
allowRead: false
},
panels: [
{id: "genInfo", title: "General Info", classObj: {panel: "panel-collapse collapse in", link: ""}, infoIcon: "fas fa-file-alt infoIcon pull-right"},
{id: "assistants", title: "Assistants", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-users infoIcon pull-right"},
{id: "agrmtns", title: "Agreements", classObj: {panel: "panel-collapse collapse", link: "collapsed"}, infoIcon: "fas fa-file-signature infoIcon pull-right"}
]
assistants: [
{id: "1",
name: "Bob",
internal: true,
cmpnyId: "1",
positionId: "1",
allowRead: false},
{id: "2",
name: "John",
internal: true,
cmpnyId: "1",
positionId: "1",
allowRead: false}
],
companies: [
{id: "1", name: "cmpny1"},
{id: "2", name: "cmpny2"},
{id: "3", name: "cmpny3"}
],
positions: [
{id: "1", name: "Pos1"},
{id: "2", name: "Pos2"},
{id: "3", name: "Pos3"}
]
},
methods: {
addAssistant: function () {
this.assistants.push(this.new_assistant);
this.new_assistant = {
id: "",
name: "",
internal: true,
cmpny_id: "",
position_id: "",
allowRead: false};
}
}
이 시점에서는 정상적으로 동작하고 있습니다만, 어시스턴트 배열로 채워진 테이블에서 행을 삭제하려고 하면 첫 번째 행이 삭제되지만 두 번째 행의 휴지통 아이콘을 클릭합니다.
VUE 컴포넌트:
Vue.component("assistant-row", {
template: "#asstntsTpl",
props: ["nw-assistant", "assistant"],
data: function () {
return {
editing: false
};
},
methods: {
remove: function (index) {
this.$parent.assistants.splice(**index**, 1);
},
edit: function () {
this.editing = true;
},
update: function () {
this.editing = false;
}
}
});
스플라이스가 전혀 작동하지 않는 것 같아요.
PD:: 다음과 같은 간단한 시나리오에서 사용하는 방법을 알고 있습니다.
<li v-for="cat,index in categories">
<button @click="remove(index)">Remove</button>
</li>
위의 코드와 같은 것을 시뮬레이트한 작은 jsfiddle을 만들었습니다.
https://jsfiddle.net/empiricalDev/eywraw8t/399050/
잘 부탁드립니다.
안부 전해 주세요!
사용해보실 수 있습니다.this.$emit()부모 컴포넌트에 이벤트를 송신하다this.$emit("delete",this.todo);가지고 있다event이름을 첫 번째 매개 변수로 지정하고this.todo부모 컴포넌트에서 추가되는 두 번째 컴포넌트@delete="removechild"다음과 같습니다.
<tod v-for="(todo, index) in todos" :todo="todo" @delete="removechild"></tod>
도입할 수 있습니다.removechild다음과 같이 부모 컴포넌트로 설정합니다.
removechild(todo){
this.todos.splice(this.todos.indexOf(todo),1);
}
주의:
만약 당신이prop와 같은 물체이다.{id:1,name:"todo 1"}필터링을 할 수 있습니다.todos처럼 배열하다this.todos= this.todos.filter((item)=>{return item.id!=todo.id});
Vue.component("tod",{
template:"#tpl",
props:["todo"],
methods: {
remove: function() {
this.$emit("delete",this.todo);
}
}
});
new Vue({
el: '#app',
data: {
todos: ['Buy milk', 'Do exercises', 'Write a book', 'Plant a tree']
},
methods:{
removechild(todo){
this.todos= this.todos.filter((item)=>{return item!=todo});
}
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<tod v-for="(todo, index) in todos" :todo="todo" @delete="removechild"></tod>
</ol>
</div>
<template id="tpl">
<li>
{{todo}}
<button @click="remove">×</button>
</li>
</template>
</body>
</html>언급URL : https://stackoverflow.com/questions/52563684/send-index-from-child-component-to-the-parent-one-to-remove-array-item-in-v-for
반응형
'sourcecode' 카테고리의 다른 글
| Java에서의 해시 맵 인쇄 (0) | 2022.08.28 |
|---|---|
| vue-cli-service에서 빌드된 Vue 구성 요소를 가져올 수 없음 (0) | 2022.08.28 |
| 여기서 메인 0이 반환되지 않는 이유는 무엇입니까? (0) | 2022.08.28 |
| Java Stanford NLP: 음성 라벨의 일부? (0) | 2022.08.28 |
| 라우터 매개 변수의 프로펠러 유형이 잘못되었습니다. 수에 문자열이 있어야 합니다. (0) | 2022.08.28 |