Question

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

快餐栏会在3秒钟后自动关闭。关闭快餐栏后如何将状态设置为false。

小吃栏组件

<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"],

小吃栏组件中的方法

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",
}
}

在父组件中导入吸气剂

 ...mapGetters([ "snackbarBox"])

vuex 变异

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

状态

snackbarBox: false,

获取者

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

如何解决这个问题？

Answer 1

问题出在<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Dash</title> <link rel="stylesheet" href="/assets/css/materialize.min.css"> <link rel="stylesheet" href="/assets/material-icons/material-icons.css"> </head> <body> <div id="react-entry-point"> <div class="_dash-loading"> Loading... </div> </div> <footer> <script id="_dash-config" type="application/json">{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script> <script src="/_dash-component-suites/dash_renderer/react@15.4.2.min.js?v=0.13.0"></script> <script src="/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.13.0"></script> <script src="/_dash-component-suites/dash_html_components/bundle.js?v=0.11.0"></script> <script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script> <script src="/assets/material-icons/iconjar-map.js"></script> <script src="/_dash-component-suites/dash_renderer/bundle.js?v=0.13.0"></script> </footer> </body> </html>这一行。 Snackbar会在消失时更改值，但该值会作为prop传递到您的自定义小吃栏组件。

尝试一下：

将v-model="snackbar"更改为v-model="snackbar"和:value="snackbar"
添加方法输入参数：
```
@input="snackbarClose"
```
在按钮上，现在应该是methods: { snackbarClose(val) { this.$store.commit("snackbarClose", val) } }。

快餐栏在3秒钟后自动关闭。 Vue中的快餐栏关闭后如何设置状态为false

1 个答案: