хотите использовать снэк-бар vuetify в качестве глобального настраиваемого компонента в vuejs - PullRequest
Новая
       12

хотите использовать снэк-бар vuetify в качестве глобального настраиваемого компонента в vuejs

0 голосов
/ 09 июля 2020

Я использовал закусочную, чтобы показать сообщения об успехе в vuejs. Я хочу создать глобальный настраиваемый компонент закусочной. 

<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" />

но моя проблема в том, что я не могу использовать закусочную в качестве опоры в моем дочернем компоненте. он показывает мне эту ошибку. 

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"

как я могу исправить эту проблему. кто-нибудь может мне помочь?

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Я нашел способ исправить свое решение с помощью 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="snackbar = 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>

в моем модуле vuex я написал так 

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);
    },
  },
};

, затем я импортирую дочерний компонент закусочной панели в свой родительский компонент и отправьте такие данные. 

...mapActions("snackbar", ["showSnack"]),
saveDetails() {
   this.showSnack({
        text: "Successfully Saved!",
        color: "success",
        timeout: 3500,
      });
 }
0 голосов
/ 09 июля 2020

У вас есть опора и то же самое в данных.

удалить снэк-бар из data(), поскольку он доступен из 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>
...