Vueで削除する方法を教えてください
axiosでpeople.name people.idをデータベースから読み込みテーブルにnameを
一覧で表示させています
わからないのはこの部分です
remove: function(id) { this.people.splice(id, 1);}
これだと前からid番目の削除になり思ったとおりになりません
people.id=idのところを削除するようにしたいです
laravel
1{{-- データ一覧ページ --}} 2@extends('layout3') 3@section('title','データ一覧') 4 5 6 7@section('main') 8 9<div class="container"> 10 11 <div id="app4"> 12 13 <table class="table table-striped" > 14 15 <tr v-for="person in people"> 16 <td v-text="person.name"></td> 17 18 <td><span v-on:click="remove(person.id)">x</span></td> 19 </tr> 20 <tr> 21 <td> 22 <input id="new-name" v-on:keyup.enter="append" type="text"> 23 </td> 24 <!-- クリックして要素を追加 --> 25 <td> 26 <span v-on:click="append" >+</span> 27 </td> 28 </tr> 29 </table> 30 </div> 31 32</div> 33 34<script> 35 36 new Vue({ 37 el: '#app4', 38 39 data: { 40 people: {} 41 42 }, 43 mounted() { 44 var self = this; 45 var url = '/axios2'; 46 axios.get(url).then(function(response){ 47 self.people = response.data; 48 49 }); 50 }, 51 methods: { 52 // 要素を追加 53 append: function() { 54 this.people.push({ 55 name: $('#new-name').val(), 56 }); 57 // テキストボックスの中身を空に 58 $('#new-name').val(''); 59 }, 60 // 要素を削除 61 remove: function(id) { 62 this.people.splice(id, 1); 63 64 65 } 66 } 67 68 }); 69 70</script> 71 72@endsection
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。