如何使用 Vuetify Component Slot 函数

Question

我想知道标题说的是什么。我正在尝试使用 v-alert 可关闭组件，并希望在用户单击关闭按钮时添加一些功能。阅读文档 toggle 函数在 close 插槽中 " 切换警报的活动状态。在关闭插槽中可用并用作 dismissible."

中的点击操作

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

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

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

<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

这个插槽return一个叫做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-model 需要一个布尔值而不是字符串。

如何使用 Vuetify Component Slot 函数

How to use Vuetify Component Slot Function

javascript

vue.js

vuetify.js