首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue.js -如何通过正文中的删除按钮删除选中的行?

Vue.js -如何通过正文中的删除按钮删除选中的行?
EN

Stack Overflow用户
提问于 2020-08-06 22:19:08
回答 2查看 339关注 0票数 0

我真的理解vue.js,但是我的代码不能很好地工作。现在,我已经尝试通过使用delete按钮exist same来删除选中的行信息。即使我在第一行按下按钮,也不会删除,但我可以从第二行删除信息。

我在代码中使用了split方法。我查看了vue.js网站,我使用的是$delete方法,但它不起作用。

我真的很想了解vue.js和Typescript。有什么建议吗?我的代码如下。

代码语言:javascript
复制
    <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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-06 22:22:57

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

代码语言:javascript
复制
deleteRow(index:any) {
  this.users.splice(index, 1);
}
票数 2
EN

Stack Overflow用户

发布于 2020-08-06 22:24:59

您将splice与参数start as index和第二个用于删除计数的参数误用了:

代码语言:javascript
复制
 this.users.splice(index,1)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63285598

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档