Vue.js - 如何通过 tbody 中的删除按钮删除选定的行？答案

【问题标题】：Vue.js - How to delete selected row by delete button in tbody?Vue.js - 如何通过 tbody 中的删除按钮删除选定的行？
【发布时间】：2020-11-26 20:02:38
【问题描述】：

我真的很懂 vue.js，但是我的代码运行不好。现在我尝试使用删除按钮删除选定的行信息存在同一行。即使我按下第一行的按钮，也永远不会删除，但我可以从第二行的信息中删除。

我在我的代码中使用了 split 方法。我检查了 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>

【问题讨论】：

标签： typescript vue.js vuejs2 vue-component nuxt.js

【解决方案1】：

我认为您没有正确使用splice。你的方法应该是：

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

【讨论】：

【解决方案2】：

您误用了splice，参数以索引开头，第二个参数用于删除计数：

 this.users.splice(index,1)

【讨论】：