使用vue和bootstrap的列表转换:防止已删除项上移

<template>
  <div>
    <ul class="list-group">
      <li class="list-group-item" v-for="(item, index) in filteredList" :key="item.id">
        {{ item.name }}
        <button class="btn btn-danger" @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => !item.deleted).map((item, index) => {
        item.order = index + 1;
        return item;
      });
    }
  },
  methods: {
    deleteItem(index) {
      this.list[index].deleted = true;
    }
  }
};
</script>