问题是这样的:有服务卡(里面填满了来自后面的请求),还有一个删除按钮(点击它会调用removeSerivce方法)。该方法通过ID删除背面的服务,还使用拼接反应方法移除卡。一切都很好,但是需要创建一个确认窗口(您确定要删除吗?)。我被困在这个问题上,因为我不能在这个窗口内传递数组元素的索引和元素本身!我什么都试过了……告诉我怎么做最简单的方法!谢谢!
我的组件
<v-col v-for="(service,index) in allServices"
:key="service.id">
<v-card-actions>
<v-btn
text
color="deep-purple accent-4"
@click="
"
>
Редактировать
</v-btn>
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on }">
<v-btn
text
color="deep-purple accent-4"
dark
v-on="on"
>
Удалить
</v-btn>
</template>
<v-card>
<v-card-title
class="headline red lighten-2"
primary-title
>
Вы уверены?
</v-card-title>
<v-card-text>
Фид будет удалён вместе с площадкой!
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn
color="primary"
text
@click="
removeService(service,index)
dialog = false"
>
Удалить
</v-btn>
<v-btn
color="primary"
text
@click="
dialog = false"
>
Отмена
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-card-actions>
</v-card>
</v-col>
我的方法:
export default {
name: "ServiceCardList",
methods: {
removeService: function (service,index) {
axios.get('/api/services/delete/'+service.id, {})
.then((response) => {
this.allServices.splice(index, 1);
})
}
},
