如何在 Vuetify 中显示小吃店？答案

【问题标题】：How to display snackbars in Vuetify?如何在 Vuetify 中显示小吃店？
【发布时间】：2022-10-08 17:25:21
【问题描述】：

目前，单击按钮后我的小吃栏未显示。我想将快餐栏组件功能传递给位于Add.vue 的按钮。有没有办法传递组件功能？

Snackbar.vue 在组件文件夹中

<template>
  <div class="text-center ma-2">

    <v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="pink" text v-bind="attrs" @click="snackbar = false" >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: false,
      text: 'My timeout is set to 2000.',
      timeout: 2000,
    })
}
</script>

Add.vue文件

<template class="id">
  <base-form title="Add Medical Activities">
      <template v-slot:actions>

            <SnackBar :snackbar="true"/>
            <v-btn
              dark
              @click="snackbar = true"
            >test</v-btn>
            

        
      </template>
       
      <form-input v-model="inputs" :select-multiple="false"></form-input>

  </base-form>
  
</template>

<script>
import SnackBar from '~/components/SnackBar.vue'

export default {
  components: { BaseForm, FormInput, SnackBar },

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

你只需要在你的 v-model 上传递布尔值

<v-snackbar v-model="snackbar">
  hai
</v-snackbar>

<v-btn @click='snackbar = true'>

任何将 snackbar 更改为 true 的操作，snackbar 都会按照您的预期打开它

【讨论】：

【解决方案2】：

试试这个：

添加.v

    <template>
    <div>
        <Snackbar :key="snakKey" v-if="showSnackbar" @toggleSnackbar="showSnackbar = false" />
        <v-btn color="primary" @click="snackbarHandler">
            Show Snackbar
        </v-btn>
    </div>
</template>
<script>
    export default {
        name: "Add",
        data: () => ({
            showSnackbar: false,
            snakKey: 0,
        }),
        methods:{
            snackbarHandler(){
                this.snakKey++;
                this.showSnackbar = true;
            }
        }
    }
    </script>

小吃吧.vue

<template>
  <div class="text-center ma-2">
    <v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
      {{ text }}
      <template v-slot:action="{ attrs }">
        <v-btn color="pink" text v-bind="attrs" @click="$emit('toggleSnackbar')" >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: true,
      text: 'My timeout is set to 2000.',
      timeout: 3000,
    })
}
</script>

我希望这可以帮助你。

【讨论】：