vue.js - 小吃店会在 3 秒后自动关闭。如何在 vue 中关闭小吃店后将状态设置为 false
问题描述
我使用 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"],
小吃吧组件中的方法
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;
},
如何解决这个问题?
解决方案
问题出在这一行v-model="snackbar"
。Snackbar 消失时会更改值,但此值作为 prop 传递给您的自定义小吃栏组件。
尝试这个:
- 更改
v-model="snackbar"
为:value="snackbar"
和@input="snackbarClose"
添加方法输入参数:
methods: { snackbarClose(val) { this.$store.commit("snackbarClose", val) } }
- 现在应该在按钮上
@click.native="snackbarClose(false)"
。
推荐阅读
- angular - Angular 12. ApplicationRef 的循环依赖
- python - 如何使用一个模型中的字段信息来计算另一个模型中的另一个字段?
- python - 是否有 Python 代码可以直接写入 SQLite 命令行?
- python - 如何在 Django 中推荐项目?
- android - 为什么我的安全客户端连接可以在 android 上运行,但不能在 ios 上运行?
- javascript - Javascript视差对具有限制范围的图像的影响
- firebase - 我对 firebase 身份验证有疑问
- python - Django 中的 cached_property 与 Python 的 functools 有什么区别?
- c++ - 如何从 FLTK Fl__Image__Surface 获取具有透明背景的图像?
- spring - 当方法在 Kotlin 和 Mockito 中接收 java 函数类时无法存根