代码之家 › 专栏 › 技术社区 › sungyong

Vuejs:如何将当前迭代项传递给对话框?

vuetify.js vue.js

-1

sungyong · 技术社区 · 8 年前

我正在使用vuetify和v-list。

我的目标是在对话后删除用户。
但我不知道将项目传递给对话的最佳方式是什么。

我的目标是将当前迭代项作为参数传递,如下所示。

这是我的代码截图。

<v-btn 
color="green 
darken-1" 
flat 
@click="deleteUser(user.name)">Yes
</v-btn>

https://codepen.io/98mprice/pen/xaQKXZ?editors=1111

1 回复 | 直到 8 年前

1

klimat 8 年前

定义方法 deleteUser(user) 在Vue实例和使用上 splice 方法从特定索引位置的数组中移除项。

你通过 user 变量只需在视图模板中的v-for中引用其名称。

Here 您有自己的代码笔,当您单击某个项目时,它被编辑为支持删除。

ps.考虑添加唯一 id 对于每一个 用户 然后只通过一个动作 身份证件 不是完整的 用户 对象。

编辑:

我建议使用第三方lib-like vuejs-dialog 在用户删除前显示警报。配置库非常简单,只需遵循自述文件即可。

那么你的 deleteUser 方法可能如下所示:

deleteUser(user) {
   this.$dialog.confirm('Do you want to delete a user?')
    .then(dialog => {
        console.log('Clicked on proceed')
        const index = this.users.indexOf(user);      
        this.users.splice(index, 1); 
    })
    .catch(() => {
        console.log('Clicked on cancel')
    });

}