0
Vue.jsに小さなプログラムを書いていますが、エラーが発生しています。splice(index、1)要素を削除しない
X
ボタンでリストの各項目を削除します。 splice(index,1)
を使用しましたが、アイテムが削除されていません。私は何が欠けていますか?
マイHTML:
<div id="app" class="container">
<div class="row">
<div class="col-md-4">
<h1>Add Student</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" v-model="newStudent.name" class = "form-control" placeholder="Student Name">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" v-model="newStudent.address" class = "form-control" placeholder="Address">
</div>
<button class="btn btn-success" v-on:click = "addStudent">Add</button>
</div>
<div class="col-md-8">
<h1>All Students</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr v-for = "student in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="deleteStudent($index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div> <!--End of Row-->
<br>
<br>
<div class="row">
<div class="col-md-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
</div>
マイJS:
<script>
new Vue({
el: "#app",
data: {
newStudent: {name: "", address: ""},
students: []
},
methods: {
addStudent: function(){
var name = this.newStudent.name.trim();
var address = this.newStudent.address.trim();
if(name && address){
this.students.push({name: name, address: address});
this.newStudent = {name: "", address: ""};
$("#name").focus();
}
},
deleteStudent: function(index){
this.students.splice(index,1)
}
}
});
</script>
ありがとうございました。できます。チュートリアルは古いものかもしれません。 –