본문으로 바로가기

vue.js 로 행추가 및 삭제하기

category 프로그래밍/VueJS 2017.09.10 02:13



https://jsfiddle.net/7nxhygLp/



<html>
<head>
</head>
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Name</strong></td>
<td><strong>Job</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td><input type="text" v-model="row.name"></td>
<td><input type="text" v-model="row.job"></td>
<td><a @click="removeRow(row)">Remove</a></td>
</tr>
</tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>
</html>




<script>
var app = new Vue({
el: "#app",
data: {
rows: [
{name: "James Bond",job: "spy"},
{name: "Goldfinger", job: "villain"}
]
},
methods:{
addRow: function(){
this.rows.push({name:"",job:""});
},
removeRow: function(row){
//console.log(row);
this.rows.$remove(row);
}
}
});

</script>



댓글을 달아 주세요