Vue. js - Как удалить выделенную строку кнопкой удаления в tbody?

Question

Я действительно понимаю vue. js, но мой код работал некорректно. Теперь я попытался удалить информацию о выбранной строке с помощью кнопки удаления, существующей в той же строке. Даже если я sh нажимаю кнопку в первой строке, никогда не удаляю, но я могу удалить информацию из второй строки.

Я использовал метод разделения в своем коде. Я проверил веб-сайт vue. js и использовал метод $ delete, но он не работал.

Я действительно хочу понять vue. js и Typescript. Что-нибудь мне посоветует? Мой код ниже.

    <template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>username</th>
                    <th>delete</th>                    
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.email}}</td>
                    <td><v-btn class="btn btn-danger" @click="deleteRow(index)">delete</v-btn></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue{
    users:any=[]
    deleteRow(index:any){
        this.users.splice(this.users,index)
    };
    async mounted(){
        const response = await axios.get("https://jsonplaceholder.typicode.com/users");
        this.users = response.data;
    }   
}
</script>

Answer 1

Я думаю, вы неправильно используете splice. Ваш метод должен быть:

deleteRow(index:any) {
  this.users.splice(index, 1);
}

Answer 2

Вы неправильно используете splice с параметрами start как index и вторым параметром для количества удалений:

 this.users.splice(index,1)