【Vue.js/Nuxt.js】モーダルを使ってリストの1件を削除すると違うやつが消える

[こちらのサイト](https://cr-vue.mio3io.com/examples/modal.html#%E3%83%87%E3%83%A2)を参考に、モーダルを使ってリストからidを指定して１件削除しようとしたら、なぜかリストの最後だけ削除されてしまう。

（実際はvuexを使ってたり、追加・変更ボタンもあるが簡略化）

```vuejs:coping.vue
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th width="30%">名前</th>
          <th width="50%">説明</th>
          <th></th>
        </tr>
        <tr v-for="(coping, index) in coping_list" :key="index" class="coping">
          <td>
            <input v-model="coping.name" type="text" />
          </td>
          <td>
            <input v-model="coping.detail" type="text" />
          </td>
          <!-- 押されたら削除モーダルを開く -->
          <td @click="openDeleteModal()">
            <i class="fas fa-times"></i>
          </td>
          <!-- 削除しますか？のモーダルを開く
          「削除」で1件削除(closeDeleteModal()を呼び出す)
          「キャンセル」でモーダルを閉じる(deleteCoping()を呼び出す)
           -->
          <DeleteModal
            v-if="is_delete_modal"
            @close="closeDeleteModal()"
            @delete="deleteCoping(coping.id)"
          />
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
import DeleteModal from '~/components/DeleteModal.vue'
export default {
  components: {
    DeleteModal
  },
  data() {
    return {
      coping_list: [
        { id: 1, name: 'aaa', detail: 'AAA' },
        { id: 2, name: 'bbb', detail: 'BBB' }
      ],
      // モーダルの表示・非表示を管理
      is_delete_modal: false
    }
  },
  methods: {
    // IDで指定したコーピングの削除
    // モーダルからcoping.idを指定すると、なぜか最後のIDが指定されてしまう
    deleteCoping(copingId) {
      // 引数に持ったID以外のリストを作る
      this.coping_list = this.coping_list.filter(
        (coping) => coping.id !== copingId
      )
      this.closeDeleteModal()
    },
    // モーダルを表示する
    openDeleteModal() {
      this.is_delete_modal = true
    },
    // モーダルを非表示にする
    closeDeleteModal() {
      this.is_delete_modal = false
    }
  }
}
</script>
```

![2019-12-15_17h48_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444954/59b90f28-84b7-7418-433e-47512d6d7ec3.png)
![2019-12-15_17h49_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444954/08cf0bf1-adaf-6967-227e-b55e151e44fa.png)
![2019-12-15_17h50_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444954/75991989-26a7-b23d-a273-3078ce6839ff.png)

# 原因
削除モーダルをテーブルの行ごとに作っていたのが誤作動の原因。モーダルを呼び出したときに最後のモーダルだけが実行されていた。

# 解決策
削除モーダルを１つだけにする。
削除するIDは削除用IDとしてdata()に持つ

```vuejs:coping.vue
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th width="30%">名前</th>
          <th width="50%">説明</th>
          <th></th>
        </tr>
        <tr v-for="(coping, index) in coping_list" :key="index" class="coping">
          <td>
            <input v-model="coping.name" type="text" />
          </td>
          <td>
            <input v-model="coping.detail" type="text" />
          </td>
          <!-- 押されたら削除モーダルを開く
          この時に押された行のIDを渡す -->
          <td @click="openDeleteModal(coping.id)">
            <i class="fas fa-times"></i>
          </td>
        </tr>
      </thead>
    </table>
    <!-- 削除モーダルはテーブルの外に出す
    deleteCoping()の引数はdata()から貰う-->
    <DeleteModal
      v-if="is_delete_modal"
      @close="closeDeleteModal()"
      @delete="deleteCoping(delete_id)"
    />
  </div>
</template>

<script>
import DeleteModal from '~/components/DeleteModal.vue'
export default {
  components: {
    DeleteModal
  },
  data() {
    return {
      coping_list: [
        { id: 1, name: 'aaa', detail: 'AAA' },
        { id: 2, name: 'bbb', detail: 'BBB' }
      ],
      // モーダルの表示・非表示を管理
      is_delete_modal: false,
      // 削除用のID
      delete_id: null
    }
  },
  methods: {
    // IDで指定したコーピングの削除
    // モーダルからcoping.idを指定すると、なぜか最後のIDが指定されてしまう
    deleteCoping(copingId) {
      // 引数に持ったID以外のリストを作る
      this.coping_list = this.coping_list.filter(
        (coping) => coping.id !== copingId
      )
      this.closeDeleteModal()
    },
    openDeleteModal(copingId) {
      this.is_delete_modal = true
      // ここで削除用IDを設定
      this.delete_id = copingId
    },
    closeDeleteModal() {
      this.is_delete_modal = false
    }
  }
}
</script>
```

ちゃんと指定したIDのリストを削除してくれるようになった。めでたしめでたし。