monteecristoo’s blog

https://twitter.com/irakaarozo

VueJS: List rendering した item を削除

<div v-for="(item, index) in items">

  <button @click="deleteItem(item, index)">

data() {

  return {

    items: ['test', 'hi', 'hey']

method: {

  deleteItem(item, index) {

     axios.post('delete', item) {

       // server 側にデータをpost

     }

     this.items.splice(index, 1)

       // client 側のlist を更新

 

さらに list rendering が component を利用したものの場合、index を props として子component に pass する。