如何使用Vuetify组件插槽功能

Question

我想知道标题是怎么写的。我正在尝试使用v-alert可解雇组件，并希望在用户单击关闭按钮时添加一些功能。读取文档时，在关闭槽中有一个切换功能；切换警报的活动状态。可在关闭插槽中使用，并在可解除中用作单击操作">

https://vuetifyjs.com/en/api/v-alert/#functions

https://vuetifyjs.com/en/api/v-alert/#slots-关闭

在下面找到我尝试过但没有成功的东西：

<template>
<div id="app">
<v-app>
<v-alert dismissible v-model="message">
{{ message }}
<template v-slot:close="{ toggle }">
<v-btn color="primary" dark @click="myFunction"> Dismiss </v-btn>
</template>
</v-alert>
</v-app>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
message: "The message",
}),
methods: {
myFunction() {
console.log("do something before dismiss");
},
},
};
</script>

Answer 1

此槽返回一个名为toggle的函数。一种可能的解决方案是将此函数传递给您的自定义函数，执行任意操作，然后调用toggle函数。

https://codepen.io/vinisalves/pen/poRrjOY?editors=1010

<div id="app">
<v-app>
<v-alert dismissible v-model="myAlertModel">
{{ message }}
<template v-slot:close="{ toggle }">
<v-btn  color="primary" dark @click="myFunction(toggle)"> Dismiss </v-btn>
</template>
</v-alert>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
message: "The message",
myAlertModel: true,
}),
methods: {
myFunction(dismissFn) {
console.log("do something before dismiss");
dismissFn();

},

},
})

另一个问题是，v模型期望布尔值而不是字符串。