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

Posted 2023-02-23

【中文标题】Vue.js - 如何通过 tbody 中的删除按钮删除选定的行？

【英文标题】：Vue.js - How to delete selected row by delete button in 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>

【参考方案1】：

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

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

【参考方案2】：

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

 this.users.splice(index,1)