Question

i used snackbar to show success messages in vuejs. i want to make a global custom snackbar component.

<template>
  <div name="snackbars">
    <v-snackbar
      v-model="snackbar"
      :color="color"
      :timeout="timeout"
      :top=" top "
    >
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn dark text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  props: {
    snackbar: {
      type: Boolean,
      required: true,
    },
    color: {
      type: String,
      required: false,
      default: "success",
    },
    timeout: {
      type: Number,
      required: false,
      default: 3000,
    },
    text: {
      type: String,
      required: true,
    },
  },
};
</script>

然后,我把这作为我所有形式的组成部分。

<SnackBar :snackbar="snackbar" :color="color" :text="text" />

but my issue is i can t use snackbar as a prop in my child component. it shows me this error.

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop s value. Prop being mutated: "snackbar"

如何解决这一问题。谁能帮助我?

Answer 1

i found a way to fix my solution using vuex.

    <template>
      <div name="snackbars">
        <v-snackbar v-model="show" :color="color" :timeout="timeout" :top=" top ">
          {{ text }}
    
          <template v-slot:action="{ attrs }">
            <v-btn dark text v-bind="attrs" @click="show = false">
              Close
            </v-btn>
          </template>
        </v-snackbar>
      </div>
    </template>
    
    <script>
    export default {
      created() {
        this.$store.subscribe((mutation, state) => {
          if (mutation.type === "snackbar/SHOW_MESSAGE") {
            this.text = state.snackbar.text;
            this.color = state.snackbar.color;
            this.timeout = state.snackbar.timeout;
            this.show = true;
          }
        });
      },
      data() {
        return {
          show: false,
          color: "",
          text: "",
          timeout: 0,
        };
      },
    };
    </script>

在我的武克模块中,我写道:

    export default {
      namespaced: true,
      state: {
        text: "",
        color: "",
        timeout: "",
      },
      mutations: {
        SHOW_MESSAGE(state, payload) {
          state.text = payload.text;
          state.color = payload.color;
          state.timeout = payload.timeout;
        },
      },
      actions: {
        showSnack({ commit }, payload) {
          commit("SHOW_MESSAGE", payload);
        },
      },
    };

then i import snackbar child component into my parent component and send data like this.

    ...mapActions("snackbar", ["showSnack"]),
    saveDetails() {
       this.showSnack({
            text: "Successfully Saved!",
            color: "success",
            timeout: 3500,
          });
     }

Answer 2

I realize this is old, but thanks to google, I am going to add my solution. I use this, because I don t see the point of using vuex for a snackbar. It s more work then needed.

www.un.org/Depts/DGACM/index_spanish.htm 建立名称为vtoast的词组

<template>
  <v-snackbar
      :color="color"
      :timeout="timer"
      v-model="showSnackbar"
      bottom
      right
  >
    <v-icon left>{{icon}}</v-icon>{{message}}
  </v-snackbar>
</template>

<script>
export default {
  name: "vtoast",
  data() {
    return{
      showSnackbar: false,
      message:   ,
      color:  success ,
      icon:  mdi-check ,
      timer: 3000
    }
  },
  methods:{
    show(data) {
      this.message = data.message ||  missing "message". 
      this.color = data.color ||  success 
      this.timer = data.timer || 3000
      this.icon = data.icon ||  mdi-check 
      this.showSnackbar = true
    }
  }
}
</script>

www.un.org/Depts/DGACM/index_spanish.htm 在你的主要口号中,添加以下内容:。 (通常将地雷埋在App.vue)

<template>
...
    <!-- toast -->
    <vtoast ref="vtoast"/>
...
</template>

<script>
import vtoast from  @/your/vtoast/directory/vtoast 
export default{
    name:  App , //or whatever your root is
    components:{
        vtoast
    },
    mounted() {
      this.$root.vtoast = this.$refs.vtoast
    },
}
</script>

www.un.org/Depts/DGACM/index_spanish.htm 并且获得这种服务......

this.$root.vtoast.show()
this.$root.vtoast.show({message:  Ahoy there! })

Answer 3

https://vuejs.org/guide/components/provide-inject#provide-inject” rel=“nofollow noretinger”>Provide/Inject

Create a Provider

<script setup>
import { computed, provide, ref } from  vue ;

const show = ref(false)
const message = ref(  )
const color = ref(  )

provide( snackbar , {
  show(options) {
    message.value = options.message
    color.value = options.color
    show.value = true
  },
  hide() {
    show.value = false
  }
})
</script>

<template>
  <slot />
  <v-snackbar v-model="show" :color="color">
    {{ message }}
    <template #actions>
      <v-btn variant="text" @click="show = false">Close</v-btn>
    </template>
  </v-snackbar>
</template>

Wrap your App.vue contents with the Provider

<script setup lang="ts">
import SnackbarProvider from  ./components/SnackbarProvider.vue 
</script>

<template>
  <v-app>
    <SnackbarProvider>
      <v-main>
        <!-- Other -->
      </v-main>
    </SnackbarProvider>
  </v-app>
</template>

Use the provided data anywhere inside the provider:

<script setup>
import { inject } from  vue ;

const { show } = inject( snackbar )
</script>

<template>
  <v-btn @click="show({ message:  Hello , color:  success  })">
    Show
  </v-btn>
</template>

你们还可以使用我的模块,方便地制造方言和bar:

Answer 4

在数据方面,你拥有同样的推进剂。

从<代码>prop上删除斜体。

<script>
export default {
  props: {
    snackbar: {
      type: Boolean,
      required: true,
    },
    color: {
      type: String,
      required: false,
      default: "success",
    },
    timeout: {
      type: Number,
      required: false,
      default: 3000,
    },
    text: {
      type: String,
      required: true,
    },
  }
};
</script>

Answer 5

这是我仅凭预言和事件就在<>上的发言。

页: 1

<template>
  <div class="text-center">
    <v-snackbar
      transition="true"
      bottom
      right
      v-model="show"
      :color="snackbar.color"
      :timeout="snackbar.timeout"
      class="snackbar-shadow"
    >
      <div class="d-flex align-start alert-notify">
        <v-icon size="24" class="text-white mr-5">{{ snackbar.icon }}</v-icon>
        <p class="mb-0">
          <span class="font-size-root font-weight-600">{{
            snackbar.title
          }}</span>
          <br />
          {{ snackbar.message }}
        </p>
      </div>

      <template v-slot:action="{ attrs }">
        <v-btn
          icon
          elevation="0"
          max-width="136"
          :ripple="false"
          height="43"
          class="font-weight-600 text-capitalize py-3 px-6 rounded-sm"
          color="rgba(255,255,255, .85)"
          text
          v-bind="attrs"
          @click="show = false"
        >
          <v-icon size="13">fas fa-times</v-icon>
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  name: "snackbar",
  props: {
    snackbar: Object,
  },
  computed: {
    show: {
      get() {
        return this.snackbar.visible;
      },
      set(value) {
        this.$emit("closeSnackbar", value);
      },
    },
  },
};
</script>

页: 1

 <template>
    <!-- Snackbar -->
    <snackbar :snackbar="snackbar" @closeSnackbar="SnackbarClose"></snackbar>
</template>

<script>
export default {
  name: "app",
  data() {
   return {
    snackbar: {
     visible: false,
     timeout: 2000,
     color: "#11cdef",
     title: "Hello",
     message: null,
     icon: "fas fa-bell",
    },
   };
  },
  created: { this.SnackbarShow(); }
  methods: {
    SnackbarShow() {
     this.snackbar.visible = true;
     this.snackbar.message = "Hola!? I m a snackbar";
    },
    SnackbarClose() {
      this.snackbar.visible = false;
    },
  },
};
</script>

友情链接