728x90
● 리스트에 요소 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
이름 <input v-model="name">
<button v-on:click="doAdd">추가하기</button>
<ul>
<li v-for="item in list" v-bind:key="item.id">
ID.{{ item.id }} {{ item.name }} 나이{{item.age}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
name: '김민호',
list: [
{ id: 1, name: '홍길동', age: 25},
{ id: 2, name: '김영희', age: 19},
{ id: 3, name: '김철수', age: 30}
]
},
methods: {
//추가 버튼을 클릭했을 때의 핸들러
doAdd: function(){
//리스트 내부에서 가장 큰 ID 추출하기
var maxId = this.list.reduce(function(a, b){
return a > b.id ? a : b.id
}, 0 )
//새로운 사람을 리스트에 추가하기
this.list.push({
id: maxId + 1,
name: this.name,
age: 18
})
}
}
})
버튼을 클릭할 때마다 추가됨
● 리스트에 요소 제거
배열 메서드 splice 사용
<div id="app">
<ul>
<li v-for="(item, index) in list" v-bind:key="item.id">
ID {{ item.id }} {{ item.name }} 나이 {{ item.age }}
<!-- 삭제 버튼 v-for 내부에 만들기 -->
<button v-on:click="doRemove(index)">삭제</button>
</li>
</ul>
</div>
삭제 버튼을 클릭했을 때 어떤 요소를 삭제할지 구별할 수 있게 v-for 안의 버튼에 제거전용메서드에 인덱스를 전달해야함
var app = new Vue({
el: '#app',
data: {
name: '김민호',
list: [
{ id: 1, name: '홍길동', age: 25},
{ id: 2, name: '김영희', age: 19},
{ id: 3, name: '김철수', age: 30}
]
},
methods: {
//삭제 버튼을 클릭했을 때의 핸들러
doRemove: function(index){
//전달받은 인덱스 위치에서 한 개만큼 제거
this.list.splice(index, 1)
}
}
})
splice 메서드를 사용해서 제거하고 싶은 요소의 인덱스와 개수를 지정함
=> 클릭한 요소만 삭제됨
* 대상이 되는 배열을 직접변경하는 배열 메서드
push
pop
shift
unshift
splice
sort
reverse
● 리스트 요소 변경하기
Vue.js 는 인덱스 숫자를 사용한 배열 요소 변경을 감지하지 못함
잘못된 사용 ▶ this.list[0] = { id:1, name: '이지현', age: 23 }
** Vue.set 메서드를 사용해야됨 => this.$set
this.$set( <변경할 데이터>, <인덱스 또는 키>, <새로운 값> )
this.$set( this.list, 0, { id: 1, name: '이지현', age: 23 } )
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] 제어 디렉티브 v-pre v-once v-text v-html (0) | 2024.01.18 |
|---|---|
| [Vue.js] $el $refs (0) | 2024.01.17 |
| [Vue.js] 반복렌더링 조건 (0) | 2024.01.17 |
| [Vue.js] key 역할 (0) | 2024.01.17 |
| [Vue.js] 리스트 데이터출력-반복렌더링 (0) | 2024.01.17 |
