小吃店会在 3 秒后自动关闭。如何在vue中关闭小吃店后将状态设置为false [重复]答案

【问题标题】：The snackbar closes automatically after 3 seconds. How to set state false after closing of snackbar in vue [duplicate]小吃店会在 3 秒后自动关闭。如何在vue中关闭小吃店后将状态设置为false [重复]
【发布时间】：2019-01-04 13:20:30
【问题描述】：

我使用 vuetify 组件创建了一个 Snackbar 组件，并将该 snapbar 组件导入到其他一些组件。我正在将道具从父母发送到孩子小吃店组件。小吃店会在一段时间后自动关闭。此时出现的错误类似于“避免直接更改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，请使用基于道具值的数据或计算属性”。

小吃店会在 3 秒后自动关闭。关闭小吃店后如何将状态设置为 false。

Snackbar 组件

<v-snackbar 
                :timeout="timeout"
                :color="color"
                :top="y === 'top'"
                :bottom="y === 'bottom'"
                :right="x === 'right'"
                :left="x === 'left'"
                :multi-line="mode === 'multi-line'"
                :vertical="mode === 'vertical'"
                v-model="snackbar"
            >
                {{ text }}
                <v-btn flat color="pink" @click.native="snackbarClose"><v-icon>{{close}}</v-icon></v-btn>
            </v-snackbar>

道具

props: ["snackbar", "y", "x", "mode", "timeout", "color", "close", "text", "submit"],

snackbar 组件中的方法

methods: {
        snackbarClose () {
            this.$store.commit("snackbarClose", false)
            // this.$emit('snackbarClose', false)
        }
    }

父组件

<Snackbar 
            :close="close"
            :snackbar="snackbarBox"
            :y="y"
            :x="x"
            :mode="mode"
            :timeout="timeout"
            :color="snackbarColor"
            :text="snackbarText"
            :submit="text"
        />

父组件中的数据

data(){
return{
 y: "top",
      x: "right",
      mode: "multi-line",
      timeout: 3000,
      text: "",
      color: "",
      close: "close",
}
}

在父组件中导入 getter

 ...mapGetters([ "snackbarBox"])

vuex 变异

snackbarClose: (state, payload) => {
        state.snackbarBox = payload
    },

状态

snackbarBox: false,

吸气剂

snackbarBox: state => {
        return state.snackbarBox;
    },

如何解决？

【问题讨论】：

标签： vue.js vuejs2 vuex vuetify.js

【解决方案1】：

问题出在v-model="snackbar"这一行。 Snackbar 消失时会更改值，但此值会作为 prop 传递给您的自定义 snapbar 组件。

试试这个：

将v-model="snackbar" 更改为:value="snackbar" 和@input="snackbarClose"

添加方法输入参数：

methods: {
 snackbarClose(val) {
   this.$store.commit("snackbarClose", val)
 }
}

现在按钮上应该是@click.native="snackbarClose(false)"。

【讨论】：