я естьchild компонент иparent составная часть. Родительский компонент рендерит дочерний компонент динамически, то есть по требованию, и сохраняет запись в массиве. Когда дочерний компонент требует удаления, он генерирует событие и, следовательно, передает свой идентификатор для идентификации в записи. Хотя запись удаляется на основе идентификатора, но последний созданный экземпляр удаляется, всегда. Даже если вы нажмете первого ребенка, он удалит только последнего.

Вот это ссылка, которая идентична моей ситуации, но только в простой форме. Я провел исследование SO и нашел этоответ чья скрипкаВот, Так что я следовал его образцу в другомиграть на скрипке но результат ничем не отличается.

Я не знаю, в чем здесь проблема ... что я делаю не так?

Обновление 1: добавлен код

Обновление 2: проверьте первую ссылку, если вы хотите пропустить ниже

ChatPanel.vue

 <template>
  <div class="chat-container">
    <div class="columns" style="justify-content: flex-end;">
      <div class="column is-3" style="order: 1;">
        <div class="chat-panel">
          <nav class="panel state" :class="[statusIn ? 'in' : 'out']">
            <p class="panel-heading">
              Arbab Nazar
              <span id="click-handle" @click="toggleState"></span>
            </p>
            <div class="panel-block">
              <p class="control has-icons-left">
                <input class="input is-small" type="text" placeholder="search">
                <span class="icon is-small is-left">
                  <i class="fa fa-search"></i>
                </span>
              </p>
            </div>
            <p class="panel-tabs">
              <a class="is-active">all</a>
              <a>Online</a>
              <a>Sleeping</a>
            </p>

            <chat-list/>
          </nav>
        </div>
      </div>

       <chat-window v-for="(window, index) in windows" 
                    :identity="index" 
                    v-on:remove-window="removeWindow(window)"
      /> 

    </div>
  </div>
</template>

<script>
import ChatList from './ChatList'
import ChatWindow from './ChatWindow'

import Bus from '../Events/Bus.js'

export default {
  name: 'chatpanel',
  data () {
    return {
      statusIn: true,
      windows: [],
      id: Number
    }
  },
  mounted() {
    Bus.$on('new-window', (data)=> {
      this.windows.push((this.windows.length+1))
    })
  },
  methods: {
    toggleState(event) {
      event.stopPropagation()
      this.statusIn = !this.statusIn

    },
    removeWindow(window) {
      this.windows.splice(this.windows.indexOf(window),1)
    }
  },
  components: {
    ChatList,
    ChatWindow
  }
}
</script>

ChatWindo, w.vue

<template>
    <div class="column is-2">
        <div class="chat-window-container" :class="{'reset': statusIn}">
            <div class="card state" :class="[statusIn ? 'in' : 'out']">
                <header class="card-header">
                    Ahmad Jan
                    <a class="delete" @click="$emit('remove-window')"></a>
                    <span id="click-handle" @click="toggleState"></span>
                </header>
                <div class="card-content">
                    <template v-for="message in messages">
                        <p>
                            {{ message }}
                        </p>
                    </template>
                </div>
            </div>
            <div class="field has-addons">
                <div class="control is-expanded">
                    <input class="input" type="text" 
                            placeholder="Write something amazing..."
                            @keyup.enter="sendMessage" v-model="messageText"
                    >
                </div>
                <div class="control">
                    <a class="button is-primary" 
                        @click="sendMessage"
                        style="background:rgb(0, 184, 255)"
                    >
                    Send
                    </a>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import Bus from '../Events/Bus.js'

export default {
    props:['identity'],
    data() {
        return {
            messageText: '',
            messages: [],
            statusIn: true,
            id: ''
        }
    },
    created() {
        this.id = this.identity
    },
    methods: {
        sendMessage(event) {
            this.messages.push(this.messageText)
            this.messageText = ''
            console.log('msg', event.target.value)
            // this.messages
        },
        toggleState(event) {
            event.stopPropagation()
            this.statusIn = !this.statusIn

        },
        removeWindow(id) {
            console.log(`remove window with id ${id}`)
            Bus.$emit('remove-window', {id})
        }
    }
}
</script>

ChatList.vue

<template>
    <div style="overflow-y: scroll;max-height: 17.5rem;">
        <template v-for="chat in chats">
            <chatter :user="chat"></chatter>
        </template>
    </div>
</template>
<script>
import Chatter from './Chatter'

export default {
    props:{},
    data () {
        return {
            chats: [
                { name: 'Abdul Hameed', active: true  },
                { name: 'Ahmad Jan', active: false }, 
                { name: 'Murad Surkhab', active: false }, 
                { name: 'Angelo Mathews', active: false }, 
                { name: 'Hasan Ali', active: true }, 
                { name: 'Fakhar-ud-Din', active: true }, 
                { name: 'Sultan Usman', active: true }, 
                { name: 'Muad Saeed', active: false }, 
                { name: 'Saleem Yousaf', active: false }]
        }
    },
    components: {
        Chatter
    }
}
</script>

Chatter.vue

<template>
    <div>
        <a class="panel-block" :class="{'is-active':user.active }" @click="letsCaht">
            <div style="display: flex;">
                <p class="image is-24x24 chat-image" >
                    <img src="http://bulma.io/images/placeholders/96x96.png">
                </p>
                <p class="content">
                    {{user.name}}
                </p>
            </div>
            <span class="panel-icon">
                <i class="fa fa-comments"></i>
            </span>
        </a>
    </div>
</template>
<script>
import Bus from '../Events/Bus.js'

export default {
    props:['user'],
    methods: {
        letsCaht(event) {
            Bus.$emit('new-window', {user: this.user})
            console.log(`${this.user.name} is listening`)
        }
    },
    components: {}
}
</script>